import React, { useState, useEffect, useMemo, useRef } from 'react';
import { 
  Home, MapPin, Settings, Search, Bell, Activity, ClipboardList, Calendar, 
  CheckCircle, Clock, AlertTriangle, Wind, Droplet, ShieldAlert, Users, 
  FileText, Database, DownloadCloud, Check, RefreshCw, Info, Printer, 
  ShieldCheck, ShieldX, Map as MapIcon, ListFilter, ArrowRight, Crosshair, Edit, 
  Target, PlayCircle, Eye, User, AlertCircle, Home as HomeIcon, BellRing, Bug, Lightbulb, Timer, Flame, UploadCloud, ExternalLink, FolderOpen, BarChart2, ChevronUp, Filter, Camera, Menu, X, Download
} from 'lucide-react';

const parseOnsetObject = (dateStr) => {
  if (!dateStr || dateStr === 'ไม่ระบุวันที่' || dateStr === '-') return null;
  if (dateStr instanceof Date) return dateStr;
  if (typeof dateStr === 'string') {
    const timestampDate = new Date(dateStr);
    if (!isNaN(timestampDate) && dateStr.includes('T')) return timestampDate;
    if (dateStr.includes('-')) {
      const d = new Date(dateStr);
      if (!isNaN(d)) return d;
    }
    if (dateStr.includes('/')) {
      const parts = dateStr.split('/');
      if (parts.length === 3) {
        let year = parseInt(parts[2]);
        if (year > 2500) year -= 543;
        return new Date(year, parseInt(parts[1]) - 1, parseInt(parts[0]));
      }
    }
    const fallbackDate = new Date(dateStr);
    if (!isNaN(fallbackDate)) return fallbackDate;
  }
  return null;
};

const formatThaiDate = (dateInput) => {
  if (!dateInput) return '-';
  const d = parseOnsetObject(dateInput);
  if (!d || isNaN(d)) return typeof dateInput === 'string' ? dateInput : '-';
  const day = d.getDate();
  const monthNames = ["ม.ค.", "ก.พ.", "มี.ค.", "เม.ย.", "พ.ค.", "มิ.ย.", "ก.ค.", "ส.ค.", "ก.ย.", "ต.ค.", "พ.ย.", "ธ.ค."];
  return `${day} ${monthNames[d.getMonth()]} ${d.getFullYear() + 543}`;
};

const formatDateTimeThai = (dateString) => {
  if (!dateString) return '-';
  const d = new Date(dateString);
  if (isNaN(d)) return '-';
  const day = d.getDate();
  const monthNames = ["ม.ค.", "ก.พ.", "มี.ค.", "เม.ย.", "พ.ค.", "มิ.ย.", "ก.ค.", "ส.ค.", "ก.ย.", "ต.ค.", "พ.ย.", "ธ.ค."];
  const month = monthNames[d.getMonth()];
  const year = d.getFullYear() + 543;
  const hours = String(d.getHours()).padStart(2, '0');
  const mins = String(d.getMinutes()).padStart(2, '0');
  return `${day} ${month} ${year} เวลา ${hours}:${mins} น.`;
};

const GOOGLE_FORM_URL = "https://docs.google.com/forms/d/e/1FAIpQLSc4ggD3F1yHaKRvAM38WeTt5dw1_86efa-HsHknxeiTRlL-WQ/viewform";
const GOOGLE_SHEET_URL = "https://docs.google.com/spreadsheets/d/1SV9KyyKne4quhDzBj5k0LGC6A5TiOlXmVVtyEgYWqcw/edit?resourcekey=&gid=67922063#gid=67922063";
const GOOGLE_SCRIPT_URL = 'https://script.google.com/macros/s/AKfycby5m3Jr_lswIjob7Zprp9K2w449RJFxPMa3gjknMtB2849oiCB0_auejMqj3yW-Fh-H/exec';

const App = () => {
  const [activeMenu, setActiveMenu] = useState('patients'); 
  const [selectedPatient, setSelectedPatient] = useState(null);
  const [activePhase, setActivePhase] = useState('3h1'); 
  const [fetchedCases, setFetchedCases] = useState([]);
  const [isLoadingCases, setIsLoadingCases] = useState(true);
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [searchTerm, setSearchTerm] = useState('');
  const [selectedYear, setSelectedYear] = useState('latest'); 
  const [formData, setFormData] = useState({});
  const [isLoadingHistory, setIsLoadingHistory] = useState(false);
  const [editMode, setEditMode] = useState(false);
  const [trackingHistory, setTrackingHistory] = useState({}); 
  const [expandedKpi, setExpandedKpi] = useState(null);
  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false); 
  const [isDownloadingImage, setIsDownloadingImage] = useState(false);
  const summaryRef = useRef(null);

  const initialSteps = [
    { id: '3h1', label: 'Day 0 (รับแจ้ง)', desc: 'รายงาน รพ.สต.', targetDays: 0 },
    { id: '3h2', label: 'Day 0 (ลงพื้นที่)', desc: 'สเปรย์/สำรวจ', targetDays: 0 },
    { id: '1d', label: 'Day 1', desc: 'พ่นครั้งที่ 1', targetDays: 1 },
    { id: '3d', label: 'Day 3', desc: 'พ่นครั้งที่ 2', targetDays: 3 },
    { id: '7d', label: 'Day 7', desc: 'พ่นครั้งที่ 3', targetDays: 7 },
    { id: '14d', label: 'Day 14', desc: 'สำรวจลูกน้ำ', targetDays: 14 },
    { id: '21d', label: 'Day 21', desc: 'สำรวจลูกน้ำ', targetDays: 21 },
    { id: '28d', label: 'Day 28', desc: 'ประเมิน 28 วัน', targetDays: 28 },
    { id: 'summary', label: 'สรุปภาพรวม', desc: 'รายงานปิดเคส', targetDays: 28 },
  ];

  // 🌟 อัปเดตแนวทางปฏิบัติตามมาตรฐานกระทรวงสาธารณสุขเป๊ะๆ
  const phaseGuidelines = {
    '3h1': 'ภายใน 3 ชั่วโมงแรก สถานบริการสาธารณสุขรายงานโรคให้ รพ.สต. หรือศูนย์บริการสาธารณสุขในพื้นที่ทราบ',
    '3h2': 'ภายใน 3 ชั่วโมงหลังได้รับรายงาน รพ.สต. หรือศูนย์บริการสาธารณสุขในพื้นที่ สอบสวนโรค ทำลายแหล่งเพาะพันธุ์ยุงลาย ฉีดสเปรย์กระป๋องกำจัดยุงในบ้านผู้ป่วย และจ่ายยาทากันยุงให้ผู้ป่วยรวมถึงกลุ่มเสี่ยง',
    '1d': '1 วันหลังได้รับรายงาน อสม./อสส. สำรวจและทำลายแหล่งเพาะพันธุ์ยุงลาย และ อปท. พ่นสารเคมีกำจัดยุง ที่บ้านผู้ป่วยและบ้านที่อยู่ในรัศมี 100 เมตร ทั้งในและนอกบ้าน และจุดที่สงสัยเป็นแหล่งโรค',
    '3d': '3 วันหลังได้รับรายงาน อปท. พ่นสารเคมีกำจัดยุง ที่บ้านผู้ป่วยและบ้านที่อยู่ในรัศมี 100 เมตร ทั้งในและนอกบ้าน และจุดที่สงสัยเป็นแหล่งโรค',
    '7d': '7 วันหลังได้รับรายงาน อสม./อสส. สำรวจและทำลายแหล่งเพาะพันธุ์ยุงลาย และ อปท. พ่นสารเคมีกำจัดยุง รัศมี 100 เมตร (เป้าหมาย HI และ CI ในรัศมี 100 เมตรจากบ้านผู้ป่วยต้องเป็นศูนย์)',
    '14d': '14 วันหลังได้รับรายงาน อสม./อสส. สำรวจและทำลายแหล่งเพาะพันธุ์ยุงลายทั้งหมู่บ้าน เฝ้าระวังและติดตามผู้ป่วยรุ่นที่ 2 (เป้าหมาย HI ในหมู่บ้านไม่เกินร้อยละ 5)',
    '21d': '21 วันหลังได้รับรายงาน อสม./อสส. สำรวจและทำลายแหล่งเพาะพันธุ์ยุงทั้งหมู่บ้าน เฝ้าระวังและติดตามผู้ป่วยรุ่นที่ 2 (เป้าหมาย HI หมู่บ้านไม่เกิน 5%, CI สถานพยาบาล/โรงเรียน เป็น 0, CI โรงธรรม/โรงแรม/โรงงาน/สถานที่ราชการ ไม่เกิน 5%)',
    '28d': '28 วันหลังได้รับรายงาน คงมาตรการสำรวจและทำลายแหล่งเพาะพันธุ์ยุงในชุมชน ทุก 7 วัน โดยให้ชุมชนมีส่วนร่วม และเฝ้าระวัง ติดตามผู้ป่วยรุ่นที่ 2 (หลังจาก 28 วัน ทบทวนและถอดบทเรียนการดำเนินมาตรการฯ)',
    'summary': 'สรุปผลการดำเนินงานตั้งแต่ Day 0 ถึง Day 28 เพื่อใช้ประกอบการรายงานสอบสวนโรคเบื้องต้น'
  };

  const [steps, setSteps] = useState(initialSteps.map(s => ({ ...s, status: 'pending', date: '-' })));

  useEffect(() => {
    const fetchData = async () => {
      try {
        setIsLoadingCases(true);
        const csvPromise = fetch('https://docs.google.com/spreadsheets/d/e/2PACX-1vQI5kThGnr-ba-HnQQRD7iSSZkloNQf3CVQ5omvq0sgzd1_OVXoGU9Y4GJm5d9Ae7Nbvh_E29VTAEY_/pub?output=csv').then(res => res.text());
        const trackingPromise = fetch(`${GOOGLE_SCRIPT_URL}?action=getAllWithData`).then(res => res.json()).catch(() => ({ status: 'error', data: [] }));
        const [csvText, trackingResult] = await Promise.all([csvPromise, trackingPromise]);

        const trackData = {};
        if (trackingResult?.status === 'success' && trackingResult.data) {
           trackingResult.data.forEach(row => {
              if (!trackData[row.hn]) trackData[row.hn] = {};
              trackData[row.hn][row.phase] = row;
           });
        }
        setTrackingHistory(trackData);

        const lines = csvText.split('\n').filter(line => line.trim() !== '');
        if (lines.length === 0) throw new Error("CSV is empty");

        const headers = lines[0].split(',').map(h => h.trim().replace(/^"|"$/g, ''));
        const hnIdx = headers.findIndex(h => h.includes('HN') || h.includes('รหัส'));
        const ageIdx = headers.findIndex(h => h.includes('อายุ'));
        const dateIdx = headers.findIndex(h => h.includes('เริ่มป่วย') || h.includes('Onset'));
        const subdistrictIdx = headers.findIndex(h => h.includes('ตำบล'));
        const villageIdx = headers.findIndex(h => h.includes('หมู่บ้าน') || h.includes('หมู่ที่'));
        const addressIdx = headers.findIndex(h => h.includes('บ้านเลขที่') || h.includes('ที่อยู่'));
        const latIdx = headers.findIndex(h => h.toLowerCase() === 'lat' || h.includes('ละติจูด'));
        const lngIdx = headers.findIndex(h => h.toLowerCase() === 'lng' || h.includes('ลองติจูด'));
        
        const parsedData = lines.slice(1).map((line, idx) => {
          const values = line.split(/,(?=(?:(?:[^"]*"){2})*[^"]*$)/).map(v => v.replace(/^"|"$/g, '').trim());
          const rawDate = values[dateIdx] || '';
          const onsetDateObj = parseOnsetObject(rawDate);
          
          let daysPassed = 0;
          let endDateStr = '-';
          if (onsetDateObj) {
            daysPassed = Math.floor((new Date().getTime() - onsetDateObj.getTime()) / (1000 * 60 * 60 * 24));
            const endDate = new Date(onsetDateObj);
            endDate.setDate(endDate.getDate() + 28);
            endDateStr = formatThaiDate(endDate);
          }

          let caseYear = 'ไม่ระบุ';
          if (rawDate) {
             const matchY = rawDate.match(/\b(25\d{2}|20\d{2})\b/);
             if (matchY) caseYear = matchY[1];
          }

          let rawHN = values[hnIdx] || '';
          if (!rawHN) {
             const shortYear = caseYear !== 'ไม่ระบุ' ? caseYear.toString().slice(-2) : new Date().getFullYear().toString().slice(-2);
             rawHN = `${shortYear}-${String(idx+1).padStart(3, '0')}`;
          }

          const patientPhases = Object.keys(trackData[rawHN] || {});
          
          let realStatus = 'รอบันทึกข้อมูล';
          if (patientPhases.length > 0) {
             realStatus = (patientPhases.includes('28d') || patientPhases.includes('summary')) ? 'เสร็จสิ้นการเฝ้าระวัง' : 'ระหว่างการเฝ้าระวัง';
          }

          return {
            id: `${rawHN}-${idx}`,
            displayHn: rawHN,
            age: values[ageIdx] || '0',
            date: formatThaiDate(onsetDateObj),
            rawDate: rawDate,
            onsetDateObj: onsetDateObj,
            endDate: endDateStr,
            daysSinceOnset: Math.max(0, daysPassed),
            address: `${values[addressIdx] || ''} ${values[villageIdx] || ''} ต.${values[subdistrictIdx] || ''}`,
            village: values[villageIdx] || '',
            subdistrict: values[subdistrictIdx] || '',
            lat: parseFloat(values[latIdx]) || (15.93 + (Math.random() - 0.5) * 0.05),
            lng: parseFloat(values[lngIdx]) || (104.91 + (Math.random() - 0.5) * 0.05),
            status: realStatus,
            year: caseYear,
            completedPhases: patientPhases
          };
        });
        setFetchedCases(parsedData);
      } catch (err) {
        console.warn("Error fetching Data:", err.message);
      } finally {
        setIsLoadingCases(false);
      }
    };
    fetchData();
  }, []);

  const availableYears = useMemo(() => [...new Set(fetchedCases.map(p => p.year))].filter(y => y !== 'ไม่ระบุ').sort().reverse(), [fetchedCases]);

  useEffect(() => {
    if (selectedYear === 'latest' && availableYears.length > 0) {
       setSelectedYear(availableYears[0]);
    }
  }, [availableYears, selectedYear]);

  const kpiStats = useMemo(() => {
    const yearCases = fetchedCases.filter(p => selectedYear === 'all' || selectedYear === 'latest' ? true : p.year === selectedYear);
    const totalCases = yearCases.length;

    // KPI 2: Complete Tracking 28 Days
    const past28DaysCases = yearCases.filter(c => c.daysSinceOnset > 28);
    let completeTracking = 0;
    past28DaysCases.forEach(c => {
        const p = c.completedPhases;
        if (p.includes('1d') && p.includes('3d') && p.includes('7d') && (p.includes('28d') || p.includes('summary'))) {
            completeTracking++;
        }
    });
    const kpi2 = past28DaysCases.length === 0 ? 0 : ((completeTracking / past28DaysCases.length) * 100);

    // KPI 3: No new cases in 28 days
    let noNewCasesCount = 0;
    past28DaysCases.forEach(c => {
        const vCases = yearCases.filter(other => other.subdistrict === c.subdistrict && other.village === c.village && other.id !== c.id);
        let hasNewWithin28 = false;
        vCases.forEach(other => {
            if (c.onsetDateObj && other.onsetDateObj) {
                const diffDays = (other.onsetDateObj.getTime() - c.onsetDateObj.getTime()) / (1000 * 60 * 60 * 24);
                if (diffDays > 0 && diffDays <= 28) hasNewWithin28 = true;
            }
        });
        if (!hasNewWithin28) noNewCasesCount++;
    });
    const kpi3 = past28DaysCases.length === 0 ? 0 : ((noNewCasesCount / past28DaysCases.length) * 100);

    // KPI 4: Gen 2 Rate (Day 15-28)
    let gen2CasesCount = 0;
    yearCases.forEach(c => {
        const vCases = yearCases.filter(other => other.subdistrict === c.subdistrict && other.village === c.village && other.id !== c.id);
        let isGen2 = false;
        vCases.forEach(other => {
            if (c.onsetDateObj && other.onsetDateObj) {
                const diffDays = (c.onsetDateObj.getTime() - other.onsetDateObj.getTime()) / (1000 * 60 * 60 * 24);
                if (diffDays >= 15 && diffDays <= 28) isGen2 = true;
            }
        });
        if (isGen2) gen2CasesCount++;
    });
    const kpi4 = totalCases === 0 ? 0 : ((gen2CasesCount / totalCases) * 100);

    // KPI 5: Recurrent Larvae Rate
    let recurrentEarlyCases = 0;
    let surveyedEarlyCases = 0;
    yearCases.forEach(c => {
        const history = trackingHistory[c.displayHn] || {};
        const earlyPhases = ['3h2', '1d', '3d', '7d'];
        let allHouses = [];
        let hasRecurrent = false;
        let surveyCount = 0;

        earlyPhases.forEach(p => {
            const hData = history[p]?.formData?.housesFound100m;
            if (history[p]) surveyCount++;
            if (hData) {
                const houses = hData.split(/[\s,]+/).map(s => s.trim()).filter(s => s.length > 0);
                houses.forEach(h => {
                    if (allHouses.includes(h)) hasRecurrent = true;
                    allHouses.push(h);
                });
            }
        });

        if (surveyCount >= 2) { 
            surveyedEarlyCases++;
            if (hasRecurrent) recurrentEarlyCases++;
        }
    });
    const kpi5 = surveyedEarlyCases === 0 ? 0 : ((recurrentEarlyCases / surveyedEarlyCases) * 100);

    return {
        kpi2: { val: kpi2.toFixed(1), num: completeTracking, den: past28DaysCases.length, unit: 'ราย' },
        kpi3: { val: kpi3.toFixed(1), num: noNewCasesCount, den: past28DaysCases.length, unit: 'ราย' },
        kpi4: { val: kpi4.toFixed(1), num: gen2CasesCount, den: totalCases, unit: 'ราย' },
        kpi5: { val: kpi5.toFixed(1), num: recurrentEarlyCases, den: surveyedEarlyCases, unit: 'พื้นที่' },
    };
  }, [fetchedCases, trackingHistory, selectedYear]);

  const filteredPatients = useMemo(() => {
    return fetchedCases.filter(p => {
      const matchSearch = p.displayHn.toLowerCase().includes(searchTerm.toLowerCase()) || p.address.includes(searchTerm);
      const matchYear = (selectedYear === 'all' || selectedYear === 'latest') ? true : p.year === selectedYear;
      return matchSearch && matchYear;
    });
  }, [fetchedCases, searchTerm, selectedYear]);

  const systemAlerts = useMemo(() => {
    const alerts = { overdue: [], dueToday: [], kpiFailed: [], outbreaks: [] };
    const currentThaiYear = (new Date().getFullYear() + 543).toString(); 

    const subdistrictStats = {};
    const currentYearCases = fetchedCases
      .filter(c => c.year === currentThaiYear)
      .sort((a, b) => (a.onsetDateObj?.getTime() || 0) - (b.onsetDateObj?.getTime() || 0));

    currentYearCases.forEach(c => {
      const vKey = `${c.subdistrict}|${c.village}`;
      if (!subdistrictStats[vKey]) subdistrictStats[vKey] = { cases: [], duration: 0 };
      const stats = subdistrictStats[vKey];
      const lastCase = stats.cases[stats.cases.length - 1];
      
      if (lastCase && c.onsetDateObj && lastCase.onsetDateObj) {
        const gap = Math.floor((c.onsetDateObj.getTime() - lastCase.onsetDateObj.getTime()) / (1000 * 60 * 60 * 24));
        if (gap <= 28) {
          stats.duration += gap;
          if (stats.duration > 28 && !alerts.outbreaks.includes(vKey.replace('|', ' ต.'))) {
            alerts.outbreaks.push(vKey.replace('|', ' ต.'));
          }
        } else {
          stats.duration = 0; 
        }
      }
      stats.cases.push(c);

      if (c.status !== 'เสร็จสิ้นการเฝ้าระวัง') {
        const dso = c.daysSinceOnset;
        const nextRequiredPhase = initialSteps.find(s => s.id !== 'summary' && s.targetDays <= dso && !c.completedPhases.includes(s.id));
        
        if (nextRequiredPhase) {
          const expectedDays = nextRequiredPhase.targetDays;
          const isOverdue = dso > expectedDays;
          const alertObj = { hn: c.displayHn, village: c.village, phaseName: nextRequiredPhase.label, daysPassed: dso, expectedDay: expectedDays, patient: c };
          
          if (isOverdue) alerts.overdue.push(alertObj);
          else if (dso === expectedDays) alerts.dueToday.push(alertObj);
        }
      }

      const pHistory = trackingHistory[c.displayHn];
      if (pHistory) {
        if (pHistory['7d']) {
          const fd = pHistory['7d'].formData;
          const hi100 = (fd?.survey100mFound / fd?.survey100mTotal) * 100 || 0;
          if (hi100 > 0) alerts.kpiFailed.push({ hn: c.displayHn, village: c.village, issue: `Day 7: HI 100ม. = ${hi100.toFixed(1)}% (เป้า 0%)` });
        }
        if (pHistory['14d']) {
          const fd = pHistory['14d'].formData;
          const hiVillage = (fd?.surveyCommFound / fd?.surveyCommTotal) * 100 || 0;
          if (hiVillage > 5) alerts.kpiFailed.push({ hn: c.displayHn, village: c.village, issue: `Day 14: HI หมู่บ้าน = ${hiVillage.toFixed(1)}% (เป้า < 5%)` });
        }
      }
    });

    return alerts;
  }, [fetchedCases, trackingHistory]);

  useEffect(() => {
    if (activeMenu !== 'map' || isLoadingCases) return;

    let mapInstance = null;
    const initMap = async () => {
      if (!document.getElementById('leaflet-css')) {
        const link = document.createElement('link');
        link.id = 'leaflet-css'; link.rel = 'stylesheet';
        link.href = 'https://unpkg.com/leaflet@1.9.4/dist/leaflet.css';
        document.head.appendChild(link);
      }
      if (!window.L) {
        const script = document.createElement('script');
        script.src = 'https://unpkg.com/leaflet@1.9.4/dist/leaflet.js';
        document.head.appendChild(script);
        await new Promise(resolve => script.onload = resolve);
      }

      const container = document.getElementById('real-leaflet-map');
      if (container && !container._leaflet_id) {
        mapInstance = window.L.map('real-leaflet-map');
        
        window.L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
          attribution: 'Tiles &copy; Esri'
        }).addTo(mapInstance);

        const bounds = window.L.latLngBounds([]);

        filteredPatients.forEach(patient => {
          const latLng = [patient.lat, patient.lng];
          bounds.extend(latLng);
          
          const isCompleted = patient.status === 'เสร็จสิ้นการเฝ้าระวัง';
          const isPending = patient.status === 'รอบันทึกข้อมูล';
          const circleColor = isCompleted ? '#10B981' : (isPending ? '#EF4444' : '#F59E0B'); 
          const markerColor = isCompleted ? '#059669' : (isPending ? '#B91C1C' : '#D97706');
          
          window.L.circle(latLng, { color: circleColor, fillColor: circleColor, fillOpacity: 0.3, weight: 2, radius: 100 }).addTo(mapInstance);
          const marker = window.L.circleMarker(latLng, { radius: 5, color: '#ffffff', weight: 2, fillColor: markerColor, fillOpacity: 1 }).addTo(mapInstance);
          
          const popupContent = `
            <div style="font-family: sans-serif; min-width: 160px;">
                <div style="font-weight: bold; color: #1e293b; margin-bottom: 6px; font-size: 14px;">รหัสผู้ป่วย: ${patient.displayHn}</div>
                <div style="font-size: 12px; color: #475569; margin-bottom: 2px;"><strong>อายุ:</strong> ${patient.age} ปี</div>
                <div style="font-size: 12px; color: #475569; margin-bottom: 2px;"><strong>พิกัด:</strong> หมู่บ้าน${patient.village} ต.${patient.subdistrict}</div>
                <div style="font-size: 12px; color: #475569; margin-bottom: 2px;"><strong>วันเริ่มป่วย:</strong> ${patient.date}</div>
                <div style="font-size: 12px; color: #475569; margin-bottom: 8px;"><strong>วันสิ้นสุด:</strong> ${patient.endDate}</div>
                <span style="color: ${circleColor}; font-weight: bold; font-size: 11px; padding: 2px 6px; border: 1px solid ${circleColor}; border-radius: 4px; background: ${circleColor}10;">${patient.status}</span>
            </div>
          `;
          marker.bindPopup(popupContent);

          if (selectedPatient && patient.id === selectedPatient.id) {
             setTimeout(() => marker.openPopup(), 500);
          }
        });

        if (selectedPatient) {
          mapInstance.setView([selectedPatient.lat, selectedPatient.lng], 17);
        } else if (bounds.isValid()) {
          mapInstance.fitBounds(bounds, { padding: [20, 20], maxZoom: 16 });
        } else {
          mapInstance.setView([15.9320, 104.9150], 13);
        }
      }
    };
    initMap();
    return () => { if (mapInstance) mapInstance.remove(); };
  }, [activeMenu, fetchedCases, isLoadingCases, searchTerm, selectedYear, selectedPatient, filteredPatients]);

  const handleDownloadSummaryImage = async () => {
    if (!summaryRef.current) return;
    setIsDownloadingImage(true);
    try {
      if (!window.html2canvas) {
        const script = document.createElement('script');
        script.src = 'https://html2canvas.hertzen.com/dist/html2canvas.min.js';
        document.head.appendChild(script);
        await new Promise(resolve => script.onload = resolve);
      }
      
      const canvas = await window.html2canvas(summaryRef.current, {
        scale: 2, 
        useCORS: true,
        backgroundColor: '#f1f5f9' 
      });
      
      const image = canvas.toDataURL("image/png");
      const link = document.createElement('a');
      link.href = image;
      link.download = `สรุปเคส_${selectedPatient.displayHn}.png`;
      link.click();
    } catch (error) {
      console.error(error);
      alert("เกิดข้อผิดพลาด ไม่สามารถสร้างไฟล์รูปภาพได้");
    } finally {
      setIsDownloadingImage(false);
    }
  };

  const handleMenuClick = (menu) => {
    setActiveMenu(menu);
    setIsMobileMenuOpen(false);
  };

  const handleUpdateStatus = async (stepId) => {
    setIsSubmitting(true);
    
    const stepFormData = formData[stepId] || {};
    if (!stepFormData.visitorName) {
      stepFormData.visitorName = "นายธนากร โสเสมอ";
    }

    const payload = { hn: selectedPatient.displayHn, phase: stepId, status: 'completed', formData: stepFormData };
    try {
      await fetch(GOOGLE_SCRIPT_URL, { method: 'POST', mode: 'no-cors', body: JSON.stringify(payload) });
      const updatedSteps = steps.map((s, i) => {
        if (s.id === stepId) return { ...s, status: 'completed', date: formatThaiDate(new Date()) };
        if (!editMode && i === steps.findIndex(x => x.id === stepId) + 1 && s.status === 'pending') { 
          setActivePhase(s.id); 
          return { ...s, status: 'active' }; 
        }
        return s;
      });
      setSteps(updatedSteps); setEditMode(false);
      
      const newStatus = (stepId === '28d' || stepId === 'summary') ? 'เสร็จสิ้นการเฝ้าระวัง' : 'ระหว่างการเฝ้าระวัง';
      setFetchedCases(prev => prev.map(p => p.displayHn === selectedPatient.displayHn ? { ...p, status: newStatus, completedPhases: [...p.completedPhases, stepId] } : p));
      
      setTrackingHistory(prev => ({
        ...prev,
        [selectedPatient.displayHn]: {
          ...(prev[selectedPatient.displayHn] || {}),
          [stepId]: { phase: stepId, formData: stepFormData }
        }
      }));

    } catch (err) { console.warn(err); } finally { setIsSubmitting(false); }
  };

  const handleSelectPatient = async (patient) => {
    setSelectedPatient(patient); 
    const baseSteps = initialSteps.map(s => ({ ...s, status: 'pending', date: '-' }));
    baseSteps[0].status = 'active';
    setSteps(baseSteps); 
    setActivePhase('3h1'); 
    handleMenuClick('tracking'); 
    setFormData({}); 
    setIsLoadingHistory(true); 
    setEditMode(false);
    
    try {
      const res = await fetch(`${GOOGLE_SCRIPT_URL}?hn=${encodeURIComponent(patient.displayHn)}`);
      const result = await res.json();
      if (result?.status === 'success' && result.data?.length > 0) {
        let updatedSteps = [...baseSteps];
        let newFormDataByPhase = {};
        let latestPhase = '3h1';
        
        result.data.forEach(item => {
           const idx = updatedSteps.findIndex(s => s.id === item.phase);
           if (idx !== -1) {
             updatedSteps[idx].status = 'completed';
             updatedSteps[idx].date = formatThaiDate(item.timestamp);
             if (idx + 1 < updatedSteps.length) { 
               updatedSteps[idx + 1].status = 'active'; 
               latestPhase = updatedSteps[idx + 1].id; 
             }
           }
           newFormDataByPhase[item.phase] = item.formData;
        });
        setSteps(updatedSteps); 
        setFormData(newFormDataByPhase); 
        setActivePhase(latestPhase);
      }
    } catch (err) { console.warn(err); } finally { setIsLoadingHistory(false); }
  };

  const handleInputChange = (e) => {
    const { name, value, type, checked } = e.target;
    setFormData(prev => ({ ...prev, [activePhase]: { ...(prev[activePhase] || {}), [name]: type === 'checkbox' ? checked : value } }));
  };

  const calcPercent = (f, t) => (!t || t == 0) ? "0.00" : ((f / t) * 100).toFixed(2);

  const renderLarvaeSurveyForm = (isLocked, phaseTarget = "") => {
    const data = formData[activePhase] || {};
    const hi100 = parseFloat(calcPercent(data.survey100mFound, data.survey100mTotal));
    const hiVillage = parseFloat(calcPercent(data.surveyCommFound, data.surveyCommTotal));
    const ciSchVal = parseFloat(calcPercent(data.schoolFound, data.schoolTotal));
    const ciOthVal = parseFloat(calcPercent(data.otherPlaceFound, data.otherPlaceTotal));
    
    const parseHouses = (str) => {
       if (!str) return [];
       return str.split(/[\s,]+/).map(s => s.trim()).filter(s => s.length > 0);
    };

    const phasesOrder = ['3h2', '1d', '3d', '7d', '14d', '21d'];
    const currentIdx = phasesOrder.indexOf(activePhase);
    let previousHouses = [];
    if (currentIdx > 0) {
       for (let i = 0; i < currentIdx; i++) {
          const pData = formData[phasesOrder[i]];
          if (pData && pData.housesFound100m) {
             previousHouses = [...previousHouses, ...parseHouses(pData.housesFound100m)];
          }
       }
    }
    const currentHouses = parseHouses(data.housesFound100m);
    const repeatedHouses = currentHouses.filter(h => previousHouses.includes(h));
    const uniqueRepeats = [...new Set(repeatedHouses)];

    let targetAlert = null;
    let targetAlertCI = null;

    if (['1d', '3d', '7d'].includes(activePhase) && hi100 > 0) {
      targetAlert = <div className="mt-4 text-sm font-semibold text-rose-700 bg-rose-50 p-3 rounded-lg border border-rose-200 flex items-center"><Target className="w-5 h-5 mr-2 shrink-0" /> ดัชนีลูกน้ำยังไม่ถึงเกณฑ์: เป้าหมาย HI รัศมี 100ม. ต้องเป็น 0%</div>;
    } else if (['14d', '21d'].includes(activePhase) && hiVillage > 5) {
      targetAlert = <div className="mt-4 text-sm font-semibold text-amber-700 bg-amber-50 p-3 rounded-lg border border-amber-200 flex items-center"><Target className="w-5 h-5 mr-2 shrink-0" /> ดัชนีลูกน้ำยังไม่ถึงเกณฑ์: เป้าหมาย HI ในหมู่บ้านต้องไม่เกิน 5%</div>;
    }

    if (activePhase === '21d') {
        const failsSchool = ciSchVal > 0;
        const failsOther = ciOthVal > 5;
        if (failsSchool || failsOther) {
            targetAlertCI = <div className="mt-4 text-sm font-semibold text-rose-700 bg-rose-50 p-3 rounded-lg border border-rose-200 flex items-start"><Target className="w-5 h-5 mr-2 mt-0.5 shrink-0" /> <div>ดัชนีลูกน้ำสถานที่สำคัญไม่ผ่านเกณฑ์:<br/>{failsSchool && "• สถานพยาบาล/โรงเรียน ต้องเป็น 0% "}{failsOther && "• สถานที่อื่นๆ ต้องไม่เกิน 5%"}</div></div>;
        }
    }

    return (
      <div className="mt-6 md:mt-8 border-t border-slate-200 pt-6">
        <h4 className="text-base font-bold text-slate-800 mb-4 md:mb-5 flex items-center"><Bug className="w-5 h-5 mr-2 text-slate-500" />แบบบันทึกการสำรวจลูกน้ำยุงลาย (HI/CI)</h4>
        
        <div className="bg-white p-4 md:p-5 rounded-2xl border border-slate-200 shadow-sm space-y-4 md:space-y-5 mb-6">
          <h5 className="text-sm font-bold text-slate-800">1. การสำรวจระดับครัวเรือน (ค่า HI) {phaseTarget && <span className="text-emerald-600 font-medium ml-2 text-xs md:text-sm">({phaseTarget})</span>}</h5>
          
          <div className="bg-slate-50 p-4 rounded-xl border border-slate-100">
            <div className="grid grid-cols-1 xs:grid-cols-2 md:grid-cols-4 gap-4 md:gap-5 items-end">
              <span className="text-sm font-semibold text-slate-700 col-span-1 xs:col-span-2 md:col-span-1">📍 รัศมี 100 เมตร</span>
              <div><label className="text-xs font-medium text-slate-500 mb-1.5 block">สำรวจ (หลัง)</label><input type="number" name="survey100mTotal" value={data.survey100mTotal || ""} onChange={handleInputChange} disabled={isLocked} className="w-full bg-white border border-slate-300 rounded-lg px-3 py-2 text-sm focus:border-emerald-500 outline-none transition-colors" /></div>
              <div><label className="text-xs font-medium text-slate-500 mb-1.5 block">พบลูกน้ำ (หลัง)</label><input type="number" name="survey100mFound" value={data.survey100mFound || ""} onChange={handleInputChange} disabled={isLocked} className="w-full bg-white border border-slate-300 rounded-lg px-3 py-2 text-sm focus:border-emerald-500 outline-none transition-colors" /></div>
              <div><label className="text-xs font-medium text-slate-500 mb-1.5 block">HI (%)</label><div className={`border rounded-lg px-3 py-2 text-sm font-bold ${hi100 > 0 && ['1d', '3d', '7d'].includes(activePhase) ? 'bg-rose-50 text-rose-700 border-rose-200' : 'bg-emerald-50 text-emerald-700 border-emerald-200'}`}>{hi100.toFixed(2)}%</div></div>
            </div>
            
            <div className="mt-4 pt-4 border-t border-slate-200">
              <label className="text-xs font-medium text-slate-500 mb-1.5 block">บ้านเลขที่ที่พบลูกน้ำ (คั่นด้วยลูกน้ำ เช่น 12/3, 15, 18)</label>
              <input type="text" name="housesFound100m" value={data.housesFound100m || ""} onChange={handleInputChange} disabled={isLocked} className="w-full bg-white border border-slate-300 rounded-lg px-3 py-2 text-sm focus:border-emerald-500 outline-none transition-colors" placeholder="ระบุบ้านเลขที่..." />
              
              {uniqueRepeats.length > 0 && (
                <div className="mt-3 text-sm font-semibold text-rose-700 bg-rose-50 p-3 rounded-xl flex items-start border border-rose-200 animate-in fade-in">
                  <AlertTriangle className="w-5 h-5 mr-2.5 mt-0.5 shrink-0" /> 
                  <div>
                     <span className="block text-rose-900 mb-0.5">แจ้งเตือน: พบลูกน้ำซ้ำซากในบ้านเลขที่ {uniqueRepeats.join(', ')}</span>
                     <span className="font-medium text-rose-700 text-xs md:text-sm">เคยพบลูกน้ำในรอบก่อนหน้านี้แล้ว กรุณาเน้นย้ำและลงพื้นที่กำจัดลูกน้ำยุงลายซ้ำโดยด่วน!</span>
                  </div>
                </div>
              )}
            </div>
          </div>
          
          <div className="grid grid-cols-1 xs:grid-cols-2 md:grid-cols-4 gap-4 md:gap-5 items-end bg-slate-50 p-4 rounded-xl border border-slate-100">
            <span className="text-sm font-semibold text-slate-700 col-span-1 xs:col-span-2 md:col-span-1">🏡 ทั้งหมู่บ้าน</span>
            <div><label className="text-xs font-medium text-slate-500 mb-1.5 block">สำรวจ (หลัง)</label><input type="number" name="surveyCommTotal" value={data.surveyCommTotal || ""} onChange={handleInputChange} disabled={isLocked} className="w-full bg-white border border-slate-300 rounded-lg px-3 py-2 text-sm focus:border-emerald-500 outline-none transition-colors" /></div>
            <div><label className="text-xs font-medium text-slate-500 mb-1.5 block">พบลูกน้ำ (หลัง)</label><input type="number" name="surveyCommFound" value={data.surveyCommFound || ""} onChange={handleInputChange} disabled={isLocked} className="w-full bg-white border border-slate-300 rounded-lg px-3 py-2 text-sm focus:border-emerald-500 outline-none transition-colors" /></div>
            <div><label className="text-xs font-medium text-slate-500 mb-1.5 block">HI (%)</label><div className={`border rounded-lg px-3 py-2 text-sm font-bold ${hiVillage > 5 && ['14d', '21d'].includes(activePhase) ? 'bg-amber-50 text-amber-700 border-amber-200' : 'bg-emerald-50 text-emerald-700 border-emerald-200'}`}>{hiVillage.toFixed(2)}%</div></div>
          </div>
          {targetAlert}
        </div>

        <div className="bg-white p-4 md:p-5 rounded-2xl border border-slate-200 shadow-sm space-y-4 md:space-y-5">
          <h5 className="text-sm font-bold text-slate-800">2. การสำรวจสถานที่สำคัญ (ค่า CI)</h5>
          
          <div className="grid grid-cols-1 xs:grid-cols-2 md:grid-cols-4 gap-4 md:gap-5 items-end bg-blue-50 p-4 rounded-xl border border-blue-100">
            <div className="col-span-1 xs:col-span-2 md:col-span-1"><label className="text-xs font-medium text-slate-600 mb-1.5 block">โรงเรียน/สถานพยาบาล</label><input type="text" name="schoolName" value={data.schoolName || ""} onChange={handleInputChange} disabled={isLocked} className="w-full bg-white border border-slate-300 rounded-lg px-3 py-2 text-sm focus:border-blue-500 outline-none transition-colors" placeholder="ระบุชื่อ..." /></div>
            <div><label className="text-xs font-medium text-slate-600 mb-1.5 block">สำรวจ (ภาชนะ)</label><input type="number" name="schoolTotal" value={data.schoolTotal || ""} onChange={handleInputChange} disabled={isLocked} className="w-full bg-white border border-slate-300 rounded-lg px-3 py-2 text-sm focus:border-blue-500 outline-none transition-colors" /></div>
            <div><label className="text-xs font-medium text-slate-600 mb-1.5 block">พบลูกน้ำ (ภาชนะ)</label><input type="number" name="schoolFound" value={data.schoolFound || ""} onChange={handleInputChange} disabled={isLocked} className="w-full bg-white border border-slate-300 rounded-lg px-3 py-2 text-sm focus:border-blue-500 outline-none transition-colors" /></div>
            <div>
              <label className="text-xs font-medium text-slate-600 mb-1.5 block">CI (%)</label>
              <div className={`border rounded-lg px-3 py-2 text-sm font-bold ${ciSchVal > 0 && activePhase === '21d' ? 'bg-rose-50 text-rose-700 border-rose-200' : 'bg-white text-slate-700 border-slate-300'}`}>{calcPercent(data.schoolFound, data.schoolTotal)}%</div>
            </div>
          </div>

          <div className="grid grid-cols-1 xs:grid-cols-2 md:grid-cols-4 gap-4 md:gap-5 items-end bg-purple-50 p-4 rounded-xl border border-purple-100">
            <div className="col-span-1 xs:col-span-2 md:col-span-1"><label className="text-xs font-medium text-slate-600 mb-1.5 block">วัด/ศพด./อื่นๆ</label><input type="text" name="otherPlaceName" value={data.otherPlaceName || ""} onChange={handleInputChange} disabled={isLocked} className="w-full bg-white border border-slate-300 rounded-lg px-3 py-2 text-sm focus:border-purple-500 outline-none transition-colors" placeholder="ระบุชื่อ..." /></div>
            <div><label className="text-xs font-medium text-slate-600 mb-1.5 block">สำรวจ (ภาชนะ)</label><input type="number" name="otherPlaceTotal" value={data.otherPlaceTotal || ""} onChange={handleInputChange} disabled={isLocked} className="w-full bg-white border border-slate-300 rounded-lg px-3 py-2 text-sm focus:border-purple-500 outline-none transition-colors" /></div>
            <div><label className="text-xs font-medium text-slate-600 mb-1.5 block">พบลูกน้ำ (ภาชนะ)</label><input type="number" name="otherPlaceFound" value={data.otherPlaceFound || ""} onChange={handleInputChange} disabled={isLocked} className="w-full bg-white border border-slate-300 rounded-lg px-3 py-2 text-sm focus:border-purple-500 outline-none transition-colors" /></div>
            <div>
              <label className="text-xs font-medium text-slate-600 mb-1.5 block">CI (%)</label>
              <div className={`border rounded-lg px-3 py-2 text-sm font-bold ${ciOthVal > 5 && activePhase === '21d' ? 'bg-rose-50 text-rose-700 border-rose-200' : 'bg-white text-slate-700 border-slate-300'}`}>{calcPercent(data.otherPlaceFound, data.otherPlaceTotal)}%</div>
            </div>
          </div>

          {targetAlertCI}
        </div>
      </div>
    );
  };

  const renderAlertCenter = () => {
    if (isLoadingCases) return null;
    const hasAlerts = systemAlerts.overdue.length > 0 || systemAlerts.dueToday.length > 0 || systemAlerts.kpiFailed.length > 0 || systemAlerts.outbreaks.length > 0;
    
    if (!hasAlerts) {
       return (
         <div className="bg-emerald-50 border border-emerald-200 p-4 md:p-5 rounded-2xl mb-6 md:mb-8 flex items-center shadow-sm">
            <ShieldCheck className="w-8 h-8 md:w-10 md:h-10 text-emerald-500 mr-4 md:mr-5 shrink-0" />
            <div>
              <h3 className="font-bold text-emerald-900 text-base md:text-lg mb-1">สถานการณ์ปกติ (ข้อมูลปีปัจจุบัน)</h3>
              <p className="text-xs md:text-sm font-medium text-emerald-700">เยี่ยมมาก! ไม่มีกิจกรรมค้างดำเนินการ และพื้นที่ระบาดอยู่ในเกณฑ์ควบคุมได้</p>
            </div>
         </div>
       );
    }

    return (
      <div className="bg-white rounded-2xl border border-slate-200 mb-6 md:mb-8 shadow-sm overflow-hidden">
        <div className="bg-slate-50 p-4 md:p-5 border-b border-slate-200 flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3">
           <h3 className="text-slate-800 font-bold text-sm md:text-base flex items-center"><BellRing className="w-5 h-5 mr-2.5 text-indigo-500 shrink-0" /> แจ้งเตือนภารกิจปฏิบัติการ (เฉพาะปีปัจจุบัน)</h3>
           <span className="bg-rose-100 text-rose-700 text-xs font-bold px-3 py-1.5 rounded-full whitespace-nowrap">{systemAlerts.overdue.length + systemAlerts.kpiFailed.length + systemAlerts.outbreaks.length} รายการที่ต้องติดตาม</span>
        </div>
        <div className="p-4 md:p-5 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 md:gap-5">
           
           <div className="bg-white p-4 md:p-5 rounded-xl border border-rose-200 shadow-sm relative overflow-hidden group hover:border-rose-300 transition-colors">
              <div className="absolute top-0 left-0 w-1.5 h-full bg-rose-500"></div>
              <h4 className="font-bold text-rose-800 flex items-center mb-3 md:mb-4 text-sm"><Timer className="w-4 h-4 md:w-5 md:h-5 mr-2 shrink-0" /> เลยกำหนดลงพื้นที่ ({systemAlerts.overdue.length})</h4>
              <div className="space-y-2.5 max-h-48 overflow-y-auto pr-2 custom-scrollbar">
                {systemAlerts.overdue.length === 0 ? <p className="text-xs md:text-sm text-slate-400 font-medium">ไม่มีภารกิจค้าง</p> : 
                  systemAlerts.overdue.map((a, i) => (
                    <div key={i} className="p-3 rounded-lg border border-slate-100 hover:bg-slate-50 cursor-pointer transition-colors" onClick={() => handleSelectPatient(a.patient)}>
                      <div className="flex justify-between items-center mb-1.5">
                        <span className="text-xs md:text-sm font-bold text-slate-800">{a.hn}</span>
                        <span className="text-[10px] md:text-xs font-semibold text-rose-600 bg-rose-50 px-2 py-1 rounded-md whitespace-nowrap">ช้าไป {a.daysPassed - a.expectedDay} วัน</span>
                      </div>
                      <div className="text-xs font-medium text-slate-500">{a.village} <span className="text-slate-400 mx-1">•</span> รอ {a.phaseName}</div>
                    </div>
                  ))
                }
              </div>
           </div>

           <div className="bg-white p-4 md:p-5 rounded-xl border border-amber-200 shadow-sm relative overflow-hidden group hover:border-amber-300 transition-colors">
              <div className="absolute top-0 left-0 w-1.5 h-full bg-amber-500"></div>
              <h4 className="font-bold text-amber-800 flex items-center mb-3 md:mb-4 text-sm"><Calendar className="w-4 h-4 md:w-5 md:h-5 mr-2 shrink-0" /> ภารกิจวันนี้ ({systemAlerts.dueToday.length})</h4>
              <div className="space-y-2.5 max-h-48 overflow-y-auto pr-2 custom-scrollbar">
                {systemAlerts.dueToday.length === 0 ? <p className="text-xs md:text-sm text-slate-400 font-medium">ไม่มีภารกิจวันนี้</p> : 
                  systemAlerts.dueToday.map((a, i) => (
                    <div key={i} className="p-3 rounded-lg border border-slate-100 hover:bg-slate-50 cursor-pointer transition-colors" onClick={() => handleSelectPatient(a.patient)}>
                      <div className="flex justify-between items-center mb-1.5">
                        <span className="text-xs md:text-sm font-bold text-slate-800">{a.hn}</span>
                        <span className="text-[10px] md:text-xs font-semibold text-amber-700 bg-amber-50 px-2 py-1 rounded-md">{a.phaseName}</span>
                      </div>
                      <div className="text-xs font-medium text-slate-500">{a.village}</div>
                    </div>
                  ))
                }
              </div>
           </div>

           <div className="bg-white p-4 md:p-5 rounded-xl border border-blue-200 shadow-sm relative overflow-hidden group hover:border-blue-300 transition-colors">
              <div className="absolute top-0 left-0 w-1.5 h-full bg-blue-500"></div>
              <h4 className="font-bold text-blue-800 flex items-center mb-3 md:mb-4 text-sm"><Target className="w-4 h-4 md:w-5 md:h-5 mr-2 shrink-0" /> เฝ้าระวังพื้นที่ระบาด</h4>
              <div className="space-y-2.5 max-h-48 overflow-y-auto pr-2 custom-scrollbar">
                {systemAlerts.outbreaks.map((v, i) => (
                   <div key={`ob-${i}`} className="p-3 rounded-lg border border-slate-100 bg-slate-50/50">
                     <span className="font-bold text-slate-800 text-xs md:text-sm block mb-1">🚨 ระบาดต่อเนื่อง ({'>'} 28 วัน)</span>
                     <span className="text-xs font-medium text-slate-600">{v}</span>
                   </div>
                ))}
                {systemAlerts.kpiFailed.map((k, i) => (
                   <div key={`kpi-${i}`} className="p-3 rounded-lg border border-slate-100 bg-slate-50/50">
                     <span className="font-bold text-slate-800 text-xs md:text-sm block mb-1">{k.hn} <span className="text-slate-500 font-medium">({k.village})</span></span>
                     <span className="text-xs font-medium text-rose-600">{k.issue}</span>
                   </div>
                ))}
                {systemAlerts.outbreaks.length === 0 && systemAlerts.kpiFailed.length === 0 && <p className="text-xs md:text-sm text-slate-400 font-medium">ทุกพื้นที่อยู่ในเกณฑ์ปกติ</p>}
              </div>
           </div>

        </div>
      </div>
    );
  };

  const renderPatientList = () => {
    return (
      <div className="animate-in fade-in duration-300">
        {renderAlertCenter()}

        <div className="bg-white p-4 md:p-6 rounded-2xl shadow-sm border border-slate-200 mb-6 flex flex-col md:flex-row justify-between items-start md:items-center gap-4 md:gap-5">
          <div>
            <h2 className="text-lg md:text-xl font-bold text-slate-800 flex items-center"><Users className="w-5 h-5 md:w-6 md:h-6 mr-2 md:mr-2.5 text-emerald-600 shrink-0" />ทะเบียนผู้ป่วยโรคไข้เลือดออก</h2>
          </div>
          <div className="flex flex-col sm:flex-row gap-3 w-full md:w-auto">
            <select value={selectedYear} onChange={(e) => setSelectedYear(e.target.value)} className="w-full sm:w-auto bg-slate-50 border border-slate-300 rounded-lg px-4 py-2.5 text-sm font-medium outline-none text-slate-700 focus:border-emerald-500 transition-colors">
              <option value="all">แสดงทุกปี</option>{availableYears.map(y => <option key={y} value={y}>ปี พ.ศ. {y}</option>)}
            </select>
            <div className="flex-1 flex items-center bg-slate-50 rounded-lg px-4 border border-slate-300 focus-within:border-emerald-500 transition-colors">
              <Search className="w-4 h-4 text-slate-400 mr-2.5 shrink-0" /><input type="text" placeholder="ค้นหา HN หรือหมู่บ้าน..." value={searchTerm} onChange={(e) => setSearchTerm(e.target.value)} className="bg-transparent border-none outline-none py-2.5 text-sm w-full md:w-56 text-slate-700 font-medium placeholder-slate-400" />
            </div>
          </div>
        </div>

        <div className="bg-white rounded-2xl shadow-sm border border-slate-200 overflow-hidden w-full">
          <div className="overflow-x-auto w-full">
            <table className="w-full text-left whitespace-nowrap md:whitespace-normal">
              <thead className="bg-slate-50 border-b border-slate-200">
                <tr>
                  <th className="px-4 md:px-6 py-3 md:py-4 text-xs font-semibold text-slate-500 uppercase tracking-wider">รหัสผู้ป่วย / อายุ</th>
                  <th className="px-4 md:px-6 py-3 md:py-4 text-xs font-semibold text-slate-500 uppercase tracking-wider">หมู่บ้าน/ตำบล</th>
                  <th className="px-4 md:px-6 py-3 md:py-4 text-xs font-semibold text-slate-500 uppercase tracking-wider">วันที่เริ่มป่วย (Onset)</th>
                  <th className="px-4 md:px-6 py-3 md:py-4 text-xs font-semibold text-slate-500 uppercase tracking-wider text-center">ระยะเวลาเฝ้าระวัง</th>
                  <th className="px-4 md:px-6 py-3 md:py-4 text-xs font-semibold text-slate-500 uppercase tracking-wider text-center">สถานะเคส</th>
                  <th className="px-4 md:px-6 py-3 md:py-4 text-xs font-semibold text-slate-500 uppercase tracking-wider text-center">จัดการ</th>
                </tr>
              </thead>
              <tbody className="divide-y divide-slate-100">
                {isLoadingCases ? (
                  <tr><td colSpan="6" className="text-center py-16 md:py-24"><RefreshCw className="w-6 h-6 md:w-8 md:h-8 animate-spin mx-auto text-emerald-500 mb-3"/><p className="text-slate-500 font-medium text-xs md:text-sm">กำลังโหลดข้อมูลผู้ป่วย...</p></td></tr>
                ) : filteredPatients.length === 0 ? (
                  <tr><td colSpan="6" className="text-center py-16 md:py-24 text-slate-500 font-medium text-xs md:text-sm">ไม่พบข้อมูลผู้ป่วยที่ค้นหา</td></tr>
                ) : filteredPatients.map((p) => {
                  const isOverdue = systemAlerts.overdue.some(a => a.hn === p.displayHn);
                  const isDueToday = systemAlerts.dueToday.some(a => a.hn === p.displayHn);
                  
                  let statusBadgeClass = "bg-rose-50 text-rose-700 border-rose-200";
                  if (p.status === 'ระหว่างการเฝ้าระวัง') statusBadgeClass = "bg-amber-50 text-amber-700 border-amber-200";
                  else if (p.status === 'เสร็จสิ้นการเฝ้าระวัง') statusBadgeClass = "bg-emerald-50 text-emerald-700 border-emerald-200";

                  return (
                    <tr key={p.id} className="hover:bg-slate-50/80 transition-colors group">
                      <td className="px-4 md:px-6 py-3 md:py-4">
                        <div className="text-sm font-bold text-slate-800 mb-1">{p.displayHn}</div>
                        <span className="inline-flex items-center px-2 py-0.5 rounded-full text-[10px] md:text-xs font-medium bg-blue-50 text-blue-700 border border-blue-100">อายุ {p.age} ปี</span>
                      </td>
                      <td className="px-4 md:px-6 py-3 md:py-4">
                        <div className="text-sm font-semibold text-slate-700 mb-1 truncate max-w-[120px] md:max-w-none">{p.village}</div>
                        <div className="text-[10px] md:text-xs font-medium text-slate-500 flex items-center truncate max-w-[120px] md:max-w-none">
                          <MapPin className="w-3 h-3 md:w-3.5 md:h-3.5 mr-1 text-emerald-500 shrink-0"/> ต.{p.subdistrict}
                        </div>
                      </td>
                      <td className="px-4 md:px-6 py-3 md:py-4">
                        <div className="text-xs md:text-sm font-semibold text-slate-800 mb-1 flex items-center whitespace-nowrap">
                          <Calendar className="w-3.5 h-3.5 md:w-4 md:h-4 mr-1.5 text-amber-500 shrink-0"/> {p.date}
                        </div>
                        <div className="text-[10px] md:text-xs font-medium text-slate-500 whitespace-nowrap">
                          {p.daysSinceOnset <= 28 ? `เป้า 28 วัน: ${p.endDate}` : `ปิดเคสเมื่อ: ${p.endDate}`}
                        </div>
                      </td>
                      <td className="px-4 md:px-6 py-3 md:py-4">
                         <div className="flex flex-col items-center justify-center">
                           {p.daysSinceOnset <= 28 ? (
                             <span className="text-[10px] md:text-xs font-bold text-slate-700 bg-slate-100 px-2.5 md:px-3 py-1 rounded-lg border border-slate-200 whitespace-nowrap">Day {p.daysSinceOnset} / 28</span>
                           ) : (
                             <span className="text-[10px] md:text-xs font-bold text-emerald-700 bg-emerald-50 px-2.5 md:px-3 py-1 rounded-lg border border-emerald-200 whitespace-nowrap">สิ้นสุดเฝ้าระวัง</span>
                           )}
                           
                           {p.status !== 'เสร็จสิ้นการเฝ้าระวัง' && p.daysSinceOnset <= 28 && (isOverdue || isDueToday) && (
                             <div className="mt-1.5 md:mt-2 flex gap-1 md:gap-1.5 flex-wrap justify-center">
                               {isOverdue && <span className="px-1.5 md:px-2 py-0.5 rounded text-rose-700 border border-rose-200 text-[9px] md:text-[10px] font-bold bg-rose-50 shadow-sm whitespace-nowrap">เกินกำหนด</span>}
                               {isDueToday && <span className="px-1.5 md:px-2 py-0.5 rounded text-amber-700 border border-amber-200 text-[9px] md:text-[10px] font-bold bg-amber-50 shadow-sm whitespace-nowrap">ต้องทำวันนี้</span>}
                             </div>
                           )}
                         </div>
                      </td>
                      <td className="px-4 md:px-6 py-3 md:py-4 text-center">
                         <span className={`inline-flex items-center px-2 md:px-2.5 py-1 rounded-lg text-[10px] md:text-xs font-bold border shadow-sm whitespace-nowrap ${statusBadgeClass}`}>
                           {p.status === 'เสร็จสิ้นการเฝ้าระวัง' && <CheckCircle className="w-2.5 h-2.5 md:w-3 md:h-3 mr-1 shrink-0"/>}
                           {p.status === 'ระหว่างการเฝ้าระวัง' && <Clock className="w-2.5 h-2.5 md:w-3 md:h-3 mr-1 shrink-0"/>}
                           {p.status === 'รอบันทึกข้อมูล' && <AlertCircle className="w-2.5 h-2.5 md:w-3 md:h-3 mr-1 shrink-0"/>}
                           {p.status}
                         </span>
                      </td>
                      <td className="px-4 md:px-6 py-3 md:py-4 text-center">
                        <button onClick={() => handleSelectPatient(p)} className="inline-flex items-center justify-center px-3 md:px-4 py-1.5 md:py-2 rounded-xl text-[10px] md:text-xs font-bold bg-white border border-slate-300 text-slate-700 hover:bg-emerald-50 hover:text-emerald-700 hover:border-emerald-200 transition-all shadow-sm group-hover:shadow whitespace-nowrap">
                          ติดตามเคส <ArrowRight className="w-3 h-3 md:w-3.5 md:h-3.5 ml-1 md:ml-1.5 opacity-50 group-hover:opacity-100 transition-opacity shrink-0" />
                        </button>
                      </td>
                    </tr>
                  );
                })
              }
            </tbody>
          </table>
        </div>
      </div>
    </div>
    );
  };

  const renderMap = () => (
    <div className="animate-in fade-in duration-300 flex flex-col h-[calc(100vh-80px)] md:h-[calc(100vh-100px)] lg:h-[calc(100vh-120px)]">
      <div className="bg-white p-4 md:p-6 rounded-t-2xl shadow-sm border border-slate-200 border-b-0 flex flex-col md:flex-row justify-between items-start md:items-center z-10 gap-3 md:gap-4">
        <div>
          <h2 className="text-lg md:text-xl font-bold text-slate-800 flex items-center"><MapIcon className="w-5 h-5 md:w-6 md:h-6 mr-2 md:mr-2.5 text-blue-600 shrink-0" /> แผนที่แสดงพิกัดผู้ป่วย</h2>
          <p className="text-xs md:text-sm font-medium text-slate-500 mt-1 md:mt-1.5">แสดงพิกัดที่อยู่อาศัยและวงจรเฝ้าระวัง 100 เมตร (ดาวเทียม)</p>
        </div>
        {selectedPatient && (
          <button onClick={() => handleMenuClick('tracking')} className="w-full md:w-auto px-4 py-2.5 bg-indigo-50 hover:bg-indigo-100 text-indigo-700 border border-indigo-200 rounded-xl text-sm font-bold flex items-center justify-center transition-colors shadow-sm">
             <ArrowRight className="w-4 h-4 mr-2 rotate-180 shrink-0" /> กลับไปจัดการเคส: {selectedPatient.displayHn}
          </button>
        )}
      </div>
      <div className="flex-1 bg-slate-200 rounded-b-2xl border border-slate-200 relative overflow-hidden shadow-inner">
         <div id="real-leaflet-map" className="w-full h-full z-0"></div>
         <div className="absolute bottom-4 left-4 md:bottom-6 md:left-6 z-10 bg-white/95 backdrop-blur-md p-3 md:p-4 rounded-xl md:rounded-2xl shadow-xl border border-slate-200 pointer-events-none">
            <div className="flex items-center text-xs md:text-sm font-bold text-slate-800 mb-1"><Target className="w-4 h-4 md:w-5 md:h-5 mr-1.5 text-rose-500 shrink-0" /> รัศมี 100 เมตร</div>
            <p className="text-[10px] md:text-xs font-medium text-slate-600">อ้างอิงพ่นหมอกควันและกำจัดแหล่งเพาะพันธุ์</p>
         </div>
      </div>
    </div>
  );

  const renderTrackingView = () => {
    if (!selectedPatient) return null;
    const isLocked = steps.find(s => s.id === activePhase)?.status === 'completed' && !editMode;
    const currentData = formData[activePhase] || {};

    const activeStepObj = initialSteps.find(s => s.id === activePhase);
    const targetDays = activeStepObj ? activeStepObj.targetDays : 0;
    const isPhaseOverdue = selectedPatient.daysSinceOnset > targetDays && !isLocked && activePhase !== 'summary';
    const suggestionText = phaseGuidelines[activePhase];

    return (
      <div className="animate-in fade-in duration-300 max-w-4xl mx-auto pb-8 md:pb-10">
        <button onClick={() => handleMenuClick('patients')} className="mb-4 md:mb-5 flex items-center text-sm font-semibold text-slate-500 hover:text-emerald-600 transition-colors">
           <ArrowRight className="w-4 h-4 mr-1.5 rotate-180" /> กลับไปหน้ารายชื่อผู้ป่วย
        </button>

        <div className="bg-white p-5 md:p-7 rounded-2xl shadow-sm border border-slate-200 mb-6 md:mb-8 flex flex-col lg:flex-row justify-between items-start lg:items-center gap-5 md:gap-6 relative overflow-hidden">
            <div className="absolute top-0 left-0 w-1.5 md:w-2 h-full bg-blue-500"></div>
            <div className="flex-1 w-full pl-2 md:pl-2">
              <div className="flex flex-col sm:flex-row sm:items-center gap-3 sm:gap-4 mb-4 md:mb-5">
                 <h2 className="text-xl md:text-2xl font-bold text-slate-800 flex items-center tracking-tight truncate">
                    <User className="w-6 h-6 md:w-7 md:h-7 mr-2 md:mr-2.5 text-blue-500 shrink-0" />
                    รหัส: {selectedPatient.displayHn}
                 </h2>
                 <button 
                     onClick={() => handleMenuClick('map')}
                     className="w-full sm:w-auto px-3 py-2 sm:py-1.5 bg-slate-50 hover:bg-indigo-50 text-slate-600 hover:text-indigo-700 border border-slate-200 hover:border-indigo-200 rounded-lg text-xs font-bold flex items-center justify-center transition-all shadow-sm"
                 >
                     <MapPin className="w-3.5 h-3.5 md:w-4 md:h-4 mr-1.5 shrink-0" />
                     ดูพิกัดบนแผนที่
                 </button>
              </div>
              
              <div className="grid grid-cols-1 xs:grid-cols-2 md:grid-cols-4 gap-3 md:gap-4">
                 <div className="bg-slate-50 p-3 rounded-xl border border-slate-100">
                   <p className="text-[10px] md:text-xs font-semibold text-slate-500 uppercase tracking-wider mb-1">อายุผู้ป่วย</p>
                   <p className="text-sm md:text-base font-bold text-slate-800">{selectedPatient.age} ปี</p>
                 </div>
                 <div className="bg-slate-50 p-3 rounded-xl border border-slate-100 md:col-span-2">
                   <p className="text-[10px] md:text-xs font-semibold text-slate-500 uppercase tracking-wider mb-1 flex items-center"><MapPin className="w-3 h-3 md:w-3.5 md:h-3.5 mr-1 text-emerald-500"/> พิกัดพื้นที่เกิดโรค</p>
                   <p className="text-sm md:text-base font-bold text-slate-800 truncate" title={`${selectedPatient.village} ต.${selectedPatient.subdistrict}`}>บ้าน{selectedPatient.village} ต.{selectedPatient.subdistrict}</p>
                 </div>
                 <div className="bg-amber-50/50 p-3 rounded-xl border border-amber-100">
                   <p className="text-[10px] md:text-xs font-semibold text-amber-700 uppercase tracking-wider mb-1 flex items-center"><Calendar className="w-3 h-3 md:w-3.5 md:h-3.5 mr-1"/> วันเริ่มป่วย (Day 0)</p>
                   <p className="text-sm md:text-base font-bold text-amber-900">{selectedPatient.date}</p>
                 </div>
              </div>
            </div>
            
            <div className="flex flex-row lg:flex-col items-center lg:items-end justify-between lg:justify-center bg-slate-50 p-4 md:p-5 rounded-2xl border border-slate-200 shadow-inner w-full lg:w-auto mt-2 lg:mt-0">
               <div>
                 <p className="text-[10px] md:text-xs text-slate-500 font-bold uppercase tracking-widest mb-0 lg:mb-1.5">ระยะเวลาผ่านไป</p>
               </div>
               {selectedPatient.daysSinceOnset <= 28 ? (
                 <div className="text-right">
                   <p className="text-2xl md:text-4xl font-black text-slate-800 tracking-tighter">Day {selectedPatient.daysSinceOnset}</p>
                   <p className="text-xs md:text-sm font-medium text-slate-500 mt-0.5 md:mt-1 hidden lg:block">เป้าหมาย 28 วัน</p>
                 </div>
               ) : (
                 <div className="flex flex-col items-center lg:items-end">
                   <span className="text-lg md:text-2xl font-black text-emerald-600 tracking-tight">ปิดเคสแล้ว</span>
                   <span className="text-[10px] md:text-xs font-bold text-emerald-700 bg-emerald-100 px-2 md:px-2.5 py-1 rounded-md mt-1 md:mt-2 border border-emerald-200 shadow-sm">เกิน 28 วันแล้ว</span>
                 </div>
               )}
            </div>
        </div>

        {selectedPatient.daysSinceOnset <= 7 && (
          <div className="mb-6 md:mb-8 bg-rose-50 border border-rose-200 p-4 md:p-5 rounded-2xl flex items-start shadow-sm">
             <AlertTriangle className="w-6 h-6 md:w-7 md:h-7 text-rose-600 mr-3 md:mr-4 mt-0.5 shrink-0 animate-pulse" />
             <div>
               <p className="text-sm md:text-base font-bold text-rose-900 mb-1 md:mb-1.5">ช่วงวิกฤต 7 วันแรก (Critical Transmission Period)</p>
               <p className="text-xs md:text-sm font-medium text-rose-700 leading-relaxed">
                 ผู้ป่วยยังอยู่ในระยะแพร่เชื้อ โปรดเร่งทำลายแหล่งเพาะพันธุ์และพ่นสารเคมีควบคุมโรคตามมาตรการ 1-3-7 ทันที เพื่อกำจัดยุงตัวเต็มวัยที่มีเชื้อก่อนที่จะบินไปกัดและแพร่เชื้อสู่ผู้อื่น
               </p>
             </div>
          </div>
        )}
        {selectedPatient.daysSinceOnset > 7 && selectedPatient.daysSinceOnset <= 14 && (
          <div className="mb-6 md:mb-8 bg-amber-50 border border-amber-200 p-4 md:p-5 rounded-2xl flex items-start shadow-sm">
             <Flame className="w-6 h-6 md:w-7 md:h-7 text-amber-600 mr-3 md:mr-4 mt-0.5 shrink-0" />
             <div>
               <p className="text-sm md:text-base font-bold text-amber-900 mb-1 md:mb-1.5">ช่วงเฝ้าระวังผู้ป่วยรายใหม่ (Secondary Gen Period)</p>
               <p className="text-xs md:text-sm font-medium text-amber-700 leading-relaxed">
                 เข้าสู่ช่วงสัปดาห์ที่ 2 ของการเกิดโรค ขอให้เฝ้าระวังผู้ป่วยรายใหม่ในพื้นที่อย่างใกล้ชิด และควบคุมค่าดัชนีลูกน้ำ (HI CI) ในหมู่บ้านไม่ให้เกิน 5% เพื่อตัดวงจรการระบาดรอบสอง
               </p>
             </div>
          </div>
        )}

        {/* Timeline */}
        <div className="bg-white p-5 md:p-8 rounded-2xl shadow-sm border border-slate-200 mb-6 md:mb-8 overflow-hidden w-full">
            <h3 className="text-xs md:text-sm font-bold text-slate-500 uppercase tracking-widest mb-4 md:mb-6 text-center">ไทม์ไลน์มาตรการ 3-3-1-7-14-21-28</h3>
            <div className="flex overflow-x-auto custom-scrollbar pb-4 px-2 -mx-2 md:mx-0 snap-x">
                {steps.map((step, index) => {
                  const isActive = activePhase === step.id;
                  const isComp = step.status === 'completed';
                  
                  let btnStyle = "bg-white text-slate-300 border-slate-200 hover:border-slate-300";
                  let textStyle = "text-slate-400";
                  let dateStyle = "text-slate-400";

                  if (isComp) {
                      btnStyle = "bg-emerald-50 text-emerald-600 border-emerald-300 shadow-sm";
                      textStyle = "text-emerald-700";
                      dateStyle = "text-emerald-600";
                  } else if (isActive) {
                      btnStyle = "bg-indigo-50 text-indigo-600 border-indigo-500 shadow-md scale-110 ring-4 ring-indigo-50";
                      textStyle = "text-indigo-800 font-bold";
                      dateStyle = "text-indigo-600 font-semibold";
                  }
                  
                  const isStepOverdue = selectedPatient.daysSinceOnset > step.targetDays && !isComp && step.id !== 'summary';
                  if (isStepOverdue && !isActive && !isComp) {
                      btnStyle = "bg-rose-50 text-rose-500 border-rose-300 shadow-sm";
                      textStyle = "text-rose-700";
                      dateStyle = "text-rose-600 font-semibold";
                  }

                  let targetDateStr = '-';
                  if (selectedPatient?.onsetDateObj) {
                    const tDate = new Date(selectedPatient.onsetDateObj);
                    tDate.setDate(tDate.getDate() + step.targetDays);
                    targetDateStr = formatThaiDate(tDate);
                  }

                  return (
                  <div key={step.id} className="flex-none min-w-[75px] md:min-w-[85px] flex flex-col items-center relative group snap-start px-1">
                    {index !== steps.length - 1 && <div className={`absolute top-5 md:top-6 left-[60%] w-[calc(100%-10px)] h-[2px] md:h-[3px] -z-10 rounded-full transition-colors duration-500 ${isComp ? 'bg-emerald-300' : 'bg-slate-100'}`}></div>}
                    
                    <button 
                      onClick={() => { setActivePhase(step.id); setEditMode(false); }}
                      className={`w-10 h-10 md:w-12 md:h-12 rounded-full flex items-center justify-center border-2 md:border-[3px] transition-all duration-300 ${btnStyle} ${!isActive ? 'lg:hover:scale-105' : ''}`}
                    >
                      {isComp ? <CheckCircle className="w-4 h-4 md:w-5 md:h-5" /> : (isStepOverdue ? <Timer className="w-4 h-4 md:w-5 md:h-5" /> : <Clock className="w-4 h-4 md:w-5 md:h-5" />)}
                    </button>
                    <p className={`mt-2 md:mt-3 text-[10px] md:text-xs font-medium text-center whitespace-nowrap transition-colors ${textStyle}`}>{step.label}</p>
                    <p className={`text-[9px] md:text-[10px] mt-0.5 md:mt-1 text-center transition-colors ${dateStyle}`}>{targetDateStr}</p>
                  </div>
                )})}
            </div>
        </div>

        {activePhase !== 'summary' && (
        <div className="bg-white p-5 md:p-8 rounded-2xl shadow-sm border border-slate-200">
           <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center mb-5 md:mb-6 pb-4 md:pb-5 border-b border-slate-100 gap-3 md:gap-4">
             <h3 className="text-lg md:text-xl font-bold text-slate-800 flex items-center tracking-tight">
               <ClipboardList className="w-5 h-5 md:w-6 md:h-6 mr-2 md:mr-3 text-indigo-500 shrink-0" /> {activeStepObj?.label}
             </h3>
             {isLocked && <button onClick={()=>setEditMode(true)} className="w-full sm:w-auto px-4 py-2 rounded-xl text-xs md:text-sm font-semibold bg-slate-100 hover:bg-slate-200 text-slate-700 transition-colors flex items-center justify-center shadow-sm"><Edit className="w-4 h-4 mr-2"/> แก้ไขข้อมูล</button>}
           </div>

           {isPhaseOverdue && (
             <div className="mb-5 md:mb-6 text-xs md:text-sm font-bold text-rose-700 bg-rose-50 p-3 md:p-4 rounded-xl border border-rose-200 flex items-center shadow-sm">
               <Timer className="w-4 h-4 md:w-5 md:h-5 mr-2 md:mr-2.5 shrink-0" /> กิจกรรมนี้เกินกำหนดเวลาแล้ว กรุณารีบดำเนินการ
             </div>
           )}

           {suggestionText && (
             <div className="mb-6 md:mb-8 bg-indigo-50 border border-indigo-100 p-4 md:p-5 rounded-2xl flex items-start shadow-sm">
               <Lightbulb className="w-5 h-5 md:w-6 md:h-6 text-indigo-500 mr-2 md:mr-3 mt-0.5 shrink-0" />
               <div>
                 <p className="text-xs md:text-sm font-bold text-indigo-900 mb-1 md:mb-1.5">แนวทางปฏิบัติตามมาตรฐานกระทรวงสาธารณสุข:</p>
                 <p className="text-xs md:text-sm font-medium text-indigo-700 leading-relaxed">{suggestionText}</p>
               </div>
             </div>
           )}
           
           <div className="space-y-6 md:space-y-8 animate-in fade-in duration-500">
               <div className="grid grid-cols-1 md:grid-cols-2 gap-4 md:gap-6">
                  <div className="bg-slate-50 p-4 rounded-xl border border-slate-100">
                      <label className="text-xs md:text-sm font-semibold text-slate-700 block mb-1.5 md:mb-2">ชื่อ-สกุล ผู้ลงปฏิบัติงาน:</label>
                      <input type="text" name="visitorName" value={currentData.visitorName !== undefined ? currentData.visitorName : "นายธนากร โสเสมอ"} onChange={handleInputChange} disabled={isLocked} className="w-full bg-white border border-slate-300 rounded-lg px-3 md:px-4 py-2 md:py-2.5 text-xs md:text-sm font-medium text-slate-800 outline-none focus:border-indigo-500 focus:ring-2 focus:ring-indigo-100 transition-all shadow-sm" />
                  </div>
                  <div className="bg-slate-50 p-4 rounded-xl border border-slate-100">
                      <label className="text-xs md:text-sm font-semibold text-slate-700 block mb-1.5 md:mb-2">{['3h1', '3h2'].includes(activePhase) ? "วัน-เวลา ที่ลงปฏิบัติงานจริง:" : "วันที่ลงปฏิบัติงานจริง:"}</label>
                      <input type={['3h1', '3h2'].includes(activePhase) ? "datetime-local" : "date"} name="visitDate" value={currentData.visitDate || ""} onChange={handleInputChange} disabled={isLocked} className="w-full bg-white border border-slate-300 rounded-lg px-3 md:px-4 py-2 md:py-2.5 text-xs md:text-sm font-medium text-slate-800 outline-none focus:border-indigo-500 focus:ring-2 focus:ring-indigo-100 transition-all shadow-sm" />
                  </div>
               </div>

               <div>
                  <label className="text-xs md:text-sm font-semibold text-slate-700 block mb-1.5 md:mb-2">ข้อมูลเพิ่มเติมจากการลงพื้นที่ (สภาพแวดล้อม / ปัญหาอุปสรรค):</label>
                  <textarea name="additionalNote" value={currentData.additionalNote || ""} onChange={handleInputChange} disabled={isLocked} className="w-full bg-slate-50 border border-slate-300 rounded-xl px-3 md:px-4 py-2.5 md:py-3 h-20 md:h-24 text-xs md:text-sm font-medium text-slate-800 outline-none focus:border-indigo-500 focus:bg-white focus:ring-2 focus:ring-indigo-100 transition-all shadow-sm resize-none custom-scrollbar" placeholder="พิมพ์ข้อสังเกตเพิ่มเติม..."></textarea>
               </div>
               
               <div className="p-4 md:p-5 border border-slate-200 rounded-2xl bg-white shadow-sm">
                   <label className="text-xs md:text-sm font-bold text-slate-800 block mb-3 md:mb-4 flex items-center">
                       <Camera className="w-4 h-4 md:w-5 md:h-5 mr-1.5 md:mr-2 text-indigo-500 shrink-0"/> หลักฐานภาพถ่ายการปฏิบัติงาน (ผ่านระบบ Google Form)
                   </label>
                   
                   <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 md:gap-4">
                       <a 
                           href={GOOGLE_FORM_URL} 
                           target="_blank" 
                           rel="noreferrer"
                           className="flex flex-col items-center justify-center p-4 md:p-5 border-2 border-dashed border-blue-300 rounded-xl bg-blue-50/50 hover:bg-blue-50 hover:border-blue-400 transition-all shadow-sm group text-center"
                       >
                           <div className="bg-white p-2.5 md:p-3 rounded-full shadow-sm mb-2 md:mb-3 group-hover:scale-110 transition-transform">
                               <UploadCloud className="w-5 h-5 md:w-6 md:h-6 text-blue-600"/>
                           </div>
                           <span className="text-xs md:text-sm font-bold text-blue-800">ส่งรูปเข้า Google Form</span>
                           <span className="text-[10px] md:text-xs font-medium text-blue-600 mt-1 opacity-80">แนบภาพกิจกรรมสำหรับระยะ {activeStepObj?.label}</span>
                       </a>
                       
                       <a 
                           href={GOOGLE_SHEET_URL} 
                           target="_blank" 
                           rel="noreferrer"
                           className="flex flex-col items-center justify-center p-4 md:p-5 border-2 border-emerald-200 rounded-xl bg-emerald-50/50 hover:bg-emerald-50 hover:border-emerald-300 transition-all shadow-sm group text-center"
                       >
                           <div className="bg-white p-2.5 md:p-3 rounded-full shadow-sm mb-2 md:mb-3 group-hover:scale-110 transition-transform">
                               <Database className="w-5 h-5 md:w-6 md:h-6 text-emerald-600"/>
                           </div>
                           <span className="text-xs md:text-sm font-bold text-emerald-800">ตรวจสอบฐานข้อมูลภาพ</span>
                           <span className="text-[10px] md:text-xs font-medium text-emerald-600 mt-1 opacity-80">ดูข้อมูลใน Google Sheets แบบเรียลไทม์</span>
                       </a>
                   </div>
                   <div className="mt-3 md:mt-4 flex items-start p-2.5 md:p-3 bg-slate-50 rounded-lg">
                       <Info className="w-3.5 h-3.5 md:w-4 md:h-4 text-slate-400 mr-1.5 md:mr-2 mt-0.5 shrink-0"/>
                       <p className="text-[10px] md:text-xs font-medium text-slate-500 leading-relaxed">
                           คำแนะนำ: ในการอัปโหลดรูปผ่าน Google Form กรุณาพิมพ์ <strong>รหัสผู้ป่วย (HN)</strong> ให้ถูกต้อง
                       </p>
                   </div>
               </div>
           </div>

           {activePhase === '3h1' && (
             <div className="mt-6 md:mt-8 space-y-4 md:space-y-6 pt-5 md:pt-6 border-t border-slate-100 animate-in fade-in duration-500">
                <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 md:gap-5">
                  <div>
                    <label className="text-xs md:text-sm font-semibold text-slate-700 block mb-1.5 md:mb-2">หน่วยงาน/รพ. ที่รายงานเคส:</label>
                    <input type="text" name="reporter" value={currentData.reporter || ""} onChange={handleInputChange} disabled={isLocked} className="w-full bg-slate-50 border border-slate-300 rounded-xl px-3 md:px-4 py-2.5 md:py-3 text-xs md:text-sm font-medium focus:border-indigo-500 focus:bg-white transition-colors outline-none" placeholder="ระบุชื่อหน่วยงาน..." />
                  </div>
                  <div>
                    <label className="text-xs md:text-sm font-semibold text-slate-700 block mb-1.5 md:mb-2">วัน-เวลา ที่รับแจ้งอย่างเป็นทางการ:</label>
                    <input type="datetime-local" name="reportTime" value={currentData.reportTime || ""} onChange={handleInputChange} disabled={isLocked} className="w-full bg-slate-50 border border-slate-300 rounded-xl px-3 md:px-4 py-2.5 md:py-3 text-xs md:text-sm font-medium focus:border-indigo-500 focus:bg-white transition-colors outline-none" />
                  </div>
                </div>
             </div>
           )}

           {activePhase === '3h2' && (
             <div className="mt-6 md:mt-8 space-y-3 md:space-y-4 pt-5 md:pt-6 border-t border-slate-100 animate-in fade-in duration-500">
                <h4 className="text-sm md:text-base font-bold text-slate-800 mb-3 md:mb-4 flex items-center"><CheckCircle className="w-4 h-4 md:w-5 md:h-5 mr-1.5 md:mr-2 text-slate-400" />รายการตรวจสอบการปฏิบัติงาน</h4>
                <label className={`flex items-start md:items-center p-3 md:p-4 rounded-xl cursor-pointer border transition-colors ${currentData.isSprayed ? 'bg-emerald-50 border-emerald-200' : 'bg-slate-50 border-slate-200 hover:bg-slate-100'}`}>
                  <input type="checkbox" name="isSprayed" checked={currentData.isSprayed || false} onChange={handleInputChange} disabled={isLocked} className="w-4 h-4 md:w-5 md:h-5 mt-0.5 md:mt-0 text-emerald-600 rounded accent-emerald-600 shrink-0" />
                  <span className="ml-2.5 md:ml-3 text-xs md:text-sm font-bold text-slate-700">ฉีดสเปรย์กระป๋องกำจัดยุงในบ้านผู้ป่วย และทำลายแหล่งเพาะพันธุ์เบื้องต้นแล้ว</span>
                </label>
                <label className={`flex items-start md:items-center p-3 md:p-4 rounded-xl cursor-pointer border transition-colors ${currentData.giveRepellent ? 'bg-emerald-50 border-emerald-200' : 'bg-slate-50 border-slate-200 hover:bg-slate-100'}`}>
                  <input type="checkbox" name="giveRepellent" checked={currentData.giveRepellent || false} onChange={handleInputChange} disabled={isLocked} className="w-4 h-4 md:w-5 md:h-5 mt-0.5 md:mt-0 text-emerald-600 rounded accent-emerald-600 shrink-0" />
                  <span className="ml-2.5 md:ml-3 text-xs md:text-sm font-bold text-slate-700">จ่ายยาทากันยุงให้ผู้ป่วยและกลุ่มเสี่ยงในละแวกใกล้เคียงเรียบร้อยแล้ว</span>
                </label>
                {renderLarvaeSurveyForm(isLocked, "สำรวจข้อมูลพื้นฐาน Day 0")}
             </div>
           )}

           {(activePhase === '1d' || activePhase === '3d' || activePhase === '7d') && (
             <div className="mt-6 md:mt-8 space-y-4 pt-5 md:pt-6 border-t border-slate-100 animate-in fade-in duration-500">
                <label className={`flex items-start md:items-center p-4 md:p-5 rounded-2xl cursor-pointer border-2 transition-colors ${currentData.isFogging ? 'bg-emerald-50 border-emerald-400 shadow-sm' : 'bg-slate-50 border-slate-200 hover:border-slate-300'}`}>
                  <input type="checkbox" name="isFogging" checked={currentData.isFogging || false} onChange={handleInputChange} disabled={isLocked} className="w-5 h-5 md:w-6 md:h-6 mt-1 md:mt-0 text-emerald-600 rounded accent-emerald-600 shrink-0" />
                  <div className="ml-3 md:ml-4">
                    <span className="block text-sm md:text-base font-bold text-slate-800">ดำเนินการพ่นสารเคมี (หมอกควัน/ฝอยละออง) รัศมี 100 เมตร เรียบร้อยแล้ว</span>
                    <span className="block text-[10px] md:text-sm font-medium text-slate-500 mt-0.5">การพ่น {activePhase==='1d'?'ครั้งที่ 1 (Day 1)':activePhase==='3d'?'ครั้งที่ 2 (Day 3)':'ครั้งที่ 3 (Day 7)'} ครอบคลุมทั้งในและนอกอาคาร</span>
                  </div>
                </label>
                
                <div className="mt-4 md:mt-6 p-4 md:p-5 border border-slate-200 rounded-2xl bg-white shadow-sm">
                   <p className="text-xs md:text-sm font-bold text-slate-700 mb-3 md:mb-4 flex items-center"><Settings className="w-3.5 h-3.5 md:w-4 md:h-4 mr-1.5 md:mr-2 text-slate-400 shrink-0"/> เงื่อนไขปฏิบัติการเพิ่มเติม (เลือกถ้ามี)</p>
                   <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 md:gap-4">
                     <label className={`flex items-start p-3 rounded-xl border transition-colors ${currentData.sprayVillage ? 'bg-rose-50 border-rose-200' : 'bg-slate-50 border-slate-100 hover:bg-slate-100'}`}>
                       <input type="checkbox" name="sprayVillage" checked={currentData.sprayVillage || false} onChange={handleInputChange} disabled={isLocked} className="w-3.5 h-3.5 md:w-4 md:h-4 mt-0.5 text-rose-600 rounded accent-rose-600 shrink-0" />
                       <span className="ml-2.5 md:ml-3 text-[10px] md:text-sm font-medium text-slate-700 leading-snug">ยกระดับการควบคุม: <strong>พ่นเคมีครอบคลุมทั้งหมู่บ้าน</strong> <br/><span className="text-[9px] md:text-xs text-slate-500 font-normal">(เนื่องจากประเมินว่ามีการระบาดต่อเนื่อง หรือพบผู้ป่วยนอกรัศมี 100 ม.)</span></span>
                     </label>
                     <label className={`flex items-start p-3 rounded-xl border transition-colors ${currentData.weeklySpray ? 'bg-orange-50 border-orange-200' : 'bg-slate-50 border-slate-100 hover:bg-slate-100'}`}>
                       <input type="checkbox" name="weeklySpray" checked={currentData.weeklySpray || false} onChange={handleInputChange} disabled={isLocked} className="w-3.5 h-3.5 md:w-4 md:h-4 mt-0.5 text-orange-600 rounded accent-orange-600 shrink-0" />
                       <span className="ml-2.5 md:ml-3 text-[10px] md:text-sm font-medium text-slate-700 leading-snug">มาตรการพ่นเสริม: <strong>พ่นสารเคมีทุก 7 วัน</strong> <br/><span className="text-[9px] md:text-xs text-slate-500 font-normal">(กรณีระบาดต่อเนื่อง หรือพบผู้ป่วยใหม่ใน/นอกรัศมีเดิม)</span></span>
                     </label>
                     <label className={`flex items-start p-3 rounded-xl border transition-colors sm:col-span-2 ${currentData.rainCampaign ? 'bg-blue-50 border-blue-200' : 'bg-slate-50 border-slate-100 hover:bg-slate-100'}`}>
                       <input type="checkbox" name="rainCampaign" checked={currentData.rainCampaign || false} onChange={handleInputChange} disabled={isLocked} className="w-3.5 h-3.5 md:w-4 md:h-4 mt-0.5 text-blue-600 rounded accent-blue-600 shrink-0" />
                       <span className="ml-2.5 md:ml-3 text-[10px] md:text-sm font-medium text-slate-700 leading-snug">มีฝนตกในพื้นที่: <strong>ดำเนินการรณรงค์พิเศษ</strong> <br/><span className="text-[9px] md:text-xs text-slate-500 font-normal">(เก็บขยะ/ทำลายแหล่งเพาะพันธุ์ให้เสร็จ ภายใน 7 วันหลังฝนตก)</span></span>
                     </label>
                   </div>
                </div>

                {renderLarvaeSurveyForm(isLocked, "เป้าหมายการควบคุม HI รัศมี 100ม. = 0%")}
             </div>
           )}

           {(activePhase === '14d' || activePhase === '21d') && (
             <div className="mt-6 md:mt-8 space-y-4 pt-5 md:pt-6 border-t border-slate-100 animate-in fade-in duration-500">
                <label className={`flex items-start md:items-center p-4 md:p-5 rounded-2xl cursor-pointer border-2 transition-colors ${currentData.checkGen2 ? 'bg-blue-50 border-blue-400 shadow-sm' : 'bg-slate-50 border-slate-200 hover:border-slate-300'}`}>
                  <input type="checkbox" name="checkGen2" checked={currentData.checkGen2 || false} onChange={handleInputChange} disabled={isLocked} className="w-5 h-5 md:w-6 md:h-6 mt-1 md:mt-0 text-blue-600 rounded accent-blue-600 shrink-0" />
                  <div className="ml-3 md:ml-4">
                    <span className="block text-sm md:text-base font-bold text-slate-800">เฝ้าระวังเชิงรุกแล้ว <strong className="text-emerald-600">ไม่พบ</strong> ผู้ป่วยรายใหม่ (Gen 2) ในพื้นที่</span>
                    <span className="block text-[10px] md:text-sm font-medium text-slate-500 mt-0.5">ค้นหาผู้ป่วยที่มีอาการไข้ในชุมชนแล้ว ไม่พบผู้เข้าข่ายติดเชื้อ</span>
                  </div>
                </label>
                {renderLarvaeSurveyForm(isLocked, activePhase === '14d' ? "เป้าหมาย HI หมู่บ้าน ≤ 5%" : "เป้าหมาย HI ≤ 5%, CI สถานพยาบาล/โรงเรียน = 0%, CI อื่นๆ ≤ 5%")}
             </div>
           )}

           {activePhase === '28d' && (
             <div className="mt-6 md:mt-8 space-y-5 md:space-y-6 pt-5 md:pt-6 border-t border-slate-100 animate-in fade-in duration-500">
                <label className={`flex items-start md:items-center p-4 md:p-5 rounded-2xl cursor-pointer border-2 transition-colors ${currentData.isCaseClosed ? 'bg-emerald-50 border-emerald-500 shadow-md ring-2 md:ring-4 ring-emerald-50' : 'bg-slate-50 border-slate-300 hover:border-slate-400'}`}>
                  <input type="checkbox" name="isCaseClosed" checked={currentData.isCaseClosed || false} onChange={handleInputChange} disabled={isLocked} className="w-5 h-5 md:w-6 md:h-6 mt-1 md:mt-0 text-emerald-600 rounded accent-emerald-600 shrink-0" />
                  <div className="ml-3 md:ml-4">
                    <span className="block text-base md:text-lg font-black text-emerald-800 tracking-tight">ไม่พบผู้ป่วยรายใหม่ต่อเนื่องเกิน 28 วัน (ยุติการระบาด)</span>
                    <span className="block text-xs md:text-sm font-medium text-emerald-600 mt-0.5">ผ่านพ้นระยะฟักตัว 2 รอบ (28 วัน) อย่างปลอดภัย</span>
                  </div>
                </label>
                
                <div className="bg-white border border-slate-200 p-4 md:p-5 rounded-2xl shadow-sm">
                  <label className="text-xs md:text-sm font-bold text-slate-800 block mb-2 md:mb-3 flex items-center"><FileText className="w-3.5 h-3.5 md:w-4 md:h-4 mr-1.5 md:mr-2 text-indigo-500 shrink-0"/> บันทึกถอดบทเรียนการดำเนินงาน (After Action Review - AAR)</label>
                  <textarea name="aarNote" value={currentData.aarNote || ""} onChange={handleInputChange} disabled={isLocked} className="w-full bg-slate-50 border border-slate-300 rounded-xl p-3 md:p-4 h-24 md:h-32 text-xs md:text-sm font-medium text-slate-800 outline-none focus:border-indigo-500 focus:bg-white focus:ring-2 focus:ring-indigo-100 transition-all resize-none custom-scrollbar" placeholder="ทบทวนและถอดบทเรียนการดำเนินมาตรการ สรุปจุดแข็ง จุดอ่อน ปัญหา อุปสรรค..."></textarea>
                </div>
             </div>
           )}

           {!isLocked && (
             <button onClick={()=>handleUpdateStatus(activePhase)} disabled={isSubmitting} className="mt-6 md:mt-8 w-full bg-emerald-600 hover:bg-emerald-700 text-white py-3 md:py-4 rounded-xl font-bold text-sm md:text-base shadow-lg hover:shadow-xl transition-all flex justify-center items-center transform hover:-translate-y-0.5 print:hidden">
                {isSubmitting ? <RefreshCw className="w-4 h-4 md:w-5 md:h-5 animate-spin mr-2 md:mr-2.5 shrink-0"/> : <CheckCircle className="w-4 h-4 md:w-5 md:h-5 mr-2 md:mr-2.5 shrink-0"/>}
                <span className="truncate">{isSubmitting ? "กำลังบันทึกและส่งข้อมูลเข้าฐานระบบ..." : "ยืนยันการบันทึกข้อมูลปฏิบัติการ"}</span>
             </button>
           )}
        </div>
        )}

        {/* 🌟 ส่วนที่เพิ่มใหม่: สรุปกิจกรรมภาพรวมของผู้ป่วย (Summary View) */}
        {activePhase === 'summary' && (() => {
           // เตรียมข้อมูลเพื่อนำมาสรุป
           const d0_1 = formData['3h1'] || {};
           const d0_2 = formData['3h2'] || {};
           const d1 = formData['1d'] || {};
           const d3 = formData['3d'] || {};
           const d7 = formData['7d'] || {};
           const d14 = formData['14d'] || {};
           const d21 = formData['21d'] || {};
           const d28 = formData['28d'] || {};

           const getHiStr = (found, total) => total ? `${calcPercent(found, total)}% (${found}/${total})` : '-';
           const getCiStr = (found, total, name) => total ? `${calcPercent(found, total)}% ${name ? `(${name})` : ''}` : '-';

           return (
             <div className="mt-6 md:mt-8 space-y-6 animate-in slide-in-from-bottom-4 duration-500">
                <div className="bg-slate-800 rounded-[1.5rem] p-6 md:p-8 text-white shadow-xl relative overflow-hidden print:bg-transparent print:text-slate-900 print:shadow-none print:p-0">
                   <div className="absolute top-0 right-0 w-48 h-48 bg-white opacity-5 rounded-full -translate-y-1/2 translate-x-1/4 pointer-events-none print:hidden"></div>
                   <div className="relative z-10 flex flex-col md:flex-row justify-between items-start md:items-center gap-5">
                     <div>
                       <h3 className="text-xl md:text-3xl font-black mb-2 flex items-center tracking-tight"><ClipboardList className="w-6 h-6 md:w-8 md:h-8 mr-2.5 md:mr-3 text-emerald-400 print:text-slate-800 shrink-0" /> สรุปกิจกรรมภาพรวมของผู้ป่วย</h3>
                       <p className="text-slate-300 text-xs md:text-sm font-medium print:text-slate-600">ข้อมูลเบื้องต้นในการเขียนแบบสอบสวนโรค (รวมผลจาก Day 0 - Day 28)</p>
                     </div>
                     <div className="flex flex-col sm:flex-row gap-3 w-full md:w-auto shrink-0 print:hidden">
                       <button onClick={handleDownloadSummaryImage} disabled={isDownloadingImage} className="w-full sm:w-auto bg-blue-500 hover:bg-blue-600 text-white transition-all px-4 py-2.5 rounded-xl text-xs md:text-sm font-bold flex items-center justify-center shadow-lg hover:shadow-xl hover:-translate-y-0.5 disabled:opacity-70 disabled:hover:translate-y-0">
                         {isDownloadingImage ? <RefreshCw className="w-4 h-4 mr-2 shrink-0 animate-spin" /> : <Download className="w-4 h-4 mr-2 shrink-0" />}
                         {isDownloadingImage ? "กำลังสร้างรูป..." : "โหลดรูปภาพ (PNG)"}
                       </button>
                       <button onClick={() => window.print()} className="w-full sm:w-auto bg-emerald-500 hover:bg-emerald-600 text-white transition-all px-4 py-2.5 rounded-xl text-xs md:text-sm font-bold flex items-center justify-center shadow-lg hover:shadow-xl hover:-translate-y-0.5">
                         <Printer className="w-4 h-4 mr-2 shrink-0" /> พิมพ์เอกสาร
                       </button>
                     </div>
                   </div>
                </div>

                <div ref={summaryRef} className="grid grid-cols-1 gap-5 md:gap-6 bg-slate-100 p-1 rounded-2xl print:bg-transparent print:p-0">
                   {/* 1. ข้อมูลผู้ป่วยและพื้นที่ */}
                   <div className="bg-white border border-slate-200 rounded-2xl p-5 md:p-6 shadow-sm">
                       <h4 className="font-bold text-slate-800 text-base md:text-lg mb-4 flex items-center border-b border-slate-100 pb-3"><User className="w-5 h-5 mr-2.5 text-blue-500 shrink-0"/> 1. ข้อมูลผู้ป่วยและพื้นที่รับผิดชอบ</h4>
                       <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 text-sm">
                          <div><span className="text-slate-500 font-medium block mb-1">รหัสผู้ป่วย (HN) / อายุ</span><strong className="text-slate-800">{selectedPatient.displayHn} (อายุ {selectedPatient.age} ปี)</strong></div>
                          <div><span className="text-slate-500 font-medium block mb-1">พื้นที่เกิดโรค</span><strong className="text-slate-800">หมู่บ้าน{selectedPatient.village} ต.{selectedPatient.subdistrict}</strong></div>
                          <div><span className="text-slate-500 font-medium block mb-1">วันที่เริ่มป่วย (Onset Date)</span><strong className="text-slate-800 text-amber-700 bg-amber-50 px-2 py-0.5 rounded">{selectedPatient.date}</strong></div>
                          <div><span className="text-slate-500 font-medium block mb-1">วันที่รับแจ้งโรค (Report Date)</span><strong className="text-slate-800">{d0_1.reportTime ? formatDateTimeThai(d0_1.reportTime) : 'ยังไม่ได้ระบุ'}</strong></div>
                       </div>
                   </div>

                   {/* 2. การตอบโต้ Day 0 */}
                   <div className="bg-white border border-slate-200 rounded-2xl p-5 md:p-6 shadow-sm">
                       <h4 className="font-bold text-slate-800 text-base md:text-lg mb-4 flex items-center border-b border-slate-100 pb-3"><Activity className="w-5 h-5 mr-2.5 text-rose-500 shrink-0"/> 2. การตอบโต้ระยะฉับพลัน (Day 0)</h4>
                       <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 text-sm">
                          <div><span className="text-slate-500 font-medium block mb-1">วันที่ลงพื้นที่ฉุกเฉิน</span><strong className="text-slate-800">{d0_2.visitDate ? formatDateTimeThai(d0_2.visitDate) : 'ยังไม่ได้ระบุ'}</strong></div>
                          <div><span className="text-slate-500 font-medium block mb-1">ผู้ปฏิบัติงาน</span><strong className="text-slate-800">{d0_2.visitorName || '-'}</strong></div>
                          <div className="col-span-1 sm:col-span-2 flex flex-wrap gap-4 mt-2">
                             <div className="flex items-center gap-2 bg-slate-50 px-3 py-2 rounded-lg border border-slate-100">
                                {d0_2.isSprayed ? <CheckCircle className="w-4 h-4 text-emerald-500"/> : <X className="w-4 h-4 text-rose-500"/>}
                                <span className={d0_2.isSprayed ? "font-bold text-emerald-700" : "text-slate-500"}>ฉีดสเปรย์ฆ่ายุง</span>
                             </div>
                             <div className="flex items-center gap-2 bg-slate-50 px-3 py-2 rounded-lg border border-slate-100">
                                {d0_2.giveRepellent ? <CheckCircle className="w-4 h-4 text-emerald-500"/> : <X className="w-4 h-4 text-rose-500"/>}
                                <span className={d0_2.giveRepellent ? "font-bold text-emerald-700" : "text-slate-500"}>แจกยาทากันยุง</span>
                             </div>
                          </div>
                       </div>
                   </div>

                   {/* 3. การพ่นเคมี */}
                   <div className="bg-white border border-slate-200 rounded-2xl p-5 md:p-6 shadow-sm">
                       <h4 className="font-bold text-slate-800 text-base md:text-lg mb-4 flex items-center border-b border-slate-100 pb-3"><Wind className="w-5 h-5 mr-2.5 text-amber-500 shrink-0"/> 3. มาตรการพ่นสารเคมีกำจัดยุงตัวแก่ (Day 1, 3, 7)</h4>
                       <div className="overflow-x-auto">
                          <table className="w-full text-sm text-left border-collapse whitespace-nowrap">
                             <thead className="bg-slate-50">
                               <tr>
                                  <th className="px-4 py-2 border-b border-slate-200 font-semibold text-slate-500">รอบการพ่น</th>
                                  <th className="px-4 py-2 border-b border-slate-200 font-semibold text-slate-500">วันที่ดำเนินการ</th>
                                  <th className="px-4 py-2 border-b border-slate-200 font-semibold text-slate-500">สถานะพ่น 100ม.</th>
                                  <th className="px-4 py-2 border-b border-slate-200 font-semibold text-slate-500">เงื่อนไขพิเศษที่ดำเนินการ</th>
                               </tr>
                             </thead>
                             <tbody>
                                <tr className="border-b border-slate-100 hover:bg-slate-50">
                                  <td className="px-4 py-2.5 font-bold text-slate-700">ครั้งที่ 1 (Day 1)</td>
                                  <td className="px-4 py-2.5">{d1.visitDate ? formatThaiDate(d1.visitDate) : '-'}</td>
                                  <td className="px-4 py-2.5">{d1.isFogging ? <span className="text-emerald-600 font-bold flex items-center"><Check className="w-3.5 h-3.5 mr-1"/> ดำเนินการแล้ว</span> : '-'}</td>
                                  <td className="px-4 py-2.5 text-xs text-slate-600 space-x-2">
                                      {d1.sprayVillage && <span className="bg-rose-50 text-rose-700 px-2 py-0.5 rounded">พ่นทั้งหมู่บ้าน</span>}
                                      {d1.rainCampaign && <span className="bg-blue-50 text-blue-700 px-2 py-0.5 rounded">รณรงค์หลังฝน</span>}
                                      {d1.weeklySpray && <span className="bg-orange-50 text-orange-700 px-2 py-0.5 rounded">พ่นเสริมรายสัปดาห์</span>}
                                      {!d1.sprayVillage && !d1.rainCampaign && !d1.weeklySpray && '-'}
                                  </td>
                                </tr>
                                <tr className="border-b border-slate-100 hover:bg-slate-50">
                                  <td className="px-4 py-2.5 font-bold text-slate-700">ครั้งที่ 2 (Day 3)</td>
                                  <td className="px-4 py-2.5">{d3.visitDate ? formatThaiDate(d3.visitDate) : '-'}</td>
                                  <td className="px-4 py-2.5">{d3.isFogging ? <span className="text-emerald-600 font-bold flex items-center"><Check className="w-3.5 h-3.5 mr-1"/> ดำเนินการแล้ว</span> : '-'}</td>
                                  <td className="px-4 py-2.5 text-xs text-slate-600 space-x-2">
                                      {d3.sprayVillage && <span className="bg-rose-50 text-rose-700 px-2 py-0.5 rounded">พ่นทั้งหมู่บ้าน</span>}
                                      {d3.rainCampaign && <span className="bg-blue-50 text-blue-700 px-2 py-0.5 rounded">รณรงค์หลังฝน</span>}
                                      {d3.weeklySpray && <span className="bg-orange-50 text-orange-700 px-2 py-0.5 rounded">พ่นเสริมรายสัปดาห์</span>}
                                      {!d3.sprayVillage && !d3.rainCampaign && !d3.weeklySpray && '-'}
                                  </td>
                                </tr>
                                <tr className="hover:bg-slate-50">
                                  <td className="px-4 py-2.5 font-bold text-slate-700">ครั้งที่ 3 (Day 7)</td>
                                  <td className="px-4 py-2.5">{d7.visitDate ? formatThaiDate(d7.visitDate) : '-'}</td>
                                  <td className="px-4 py-2.5">{d7.isFogging ? <span className="text-emerald-600 font-bold flex items-center"><Check className="w-3.5 h-3.5 mr-1"/> ดำเนินการแล้ว</span> : '-'}</td>
                                  <td className="px-4 py-2.5 text-xs text-slate-600 space-x-2">
                                      {d7.sprayVillage && <span className="bg-rose-50 text-rose-700 px-2 py-0.5 rounded">พ่นทั้งหมู่บ้าน</span>}
                                      {d7.rainCampaign && <span className="bg-blue-50 text-blue-700 px-2 py-0.5 rounded">รณรงค์หลังฝน</span>}
                                      {d7.weeklySpray && <span className="bg-orange-50 text-orange-700 px-2 py-0.5 rounded">พ่นเสริมรายสัปดาห์</span>}
                                      {!d7.sprayVillage && !d7.rainCampaign && !d7.weeklySpray && '-'}
                                  </td>
                                </tr>
                             </tbody>
                          </table>
                       </div>
                   </div>

                   {/* 4. สถิติลูกน้ำ */}
                   <div className="bg-white border border-slate-200 rounded-2xl p-5 md:p-6 shadow-sm">
                       <h4 className="font-bold text-slate-800 text-base md:text-lg mb-4 flex items-center border-b border-slate-100 pb-3"><Bug className="w-5 h-5 mr-2.5 text-emerald-500 shrink-0"/> 4. ผลการสำรวจดัชนีลูกน้ำยุงลาย (HI / CI)</h4>
                       <div className="overflow-x-auto">
                         <table className="w-full text-sm text-center border-collapse whitespace-nowrap">
                           <thead className="bg-slate-50">
                             <tr>
                               <th className="px-3 py-2 border border-slate-200 font-semibold text-slate-600">ระยะเวลา</th>
                               <th className="px-3 py-2 border border-slate-200 font-semibold text-slate-600">HI 100 เมตร</th>
                               <th className="px-3 py-2 border border-slate-200 font-semibold text-slate-600">HI ทั้งหมู่บ้าน</th>
                               <th className="px-3 py-2 border border-slate-200 font-semibold text-slate-600">CI สถานที่สำคัญ</th>
                             </tr>
                           </thead>
                           <tbody>
                             {[
                               { label: 'Day 0', data: d0_2 },
                               { label: 'Day 1', data: d1 },
                               { label: 'Day 3', data: d3 },
                               { label: 'Day 7', data: d7 },
                               { label: 'Day 14', data: d14 },
                               { label: 'Day 21', data: d21 },
                             ].map((row, i) => (
                               <tr key={i} className="hover:bg-slate-50/50">
                                 <td className="px-3 py-2 border border-slate-200 font-bold bg-slate-50/50 text-slate-700">{row.label}</td>
                                 <td className="px-3 py-2 border border-slate-200 text-slate-700">{getHiStr(row.data.survey100mFound, row.data.survey100mTotal)}</td>
                                 <td className="px-3 py-2 border border-slate-200 text-slate-700">{getHiStr(row.data.surveyCommFound, row.data.surveyCommTotal)}</td>
                                 <td className="px-3 py-2 border border-slate-200 text-slate-700">
                                    <div className="flex flex-col items-center justify-center gap-1">
                                      <span>{getCiStr(row.data.schoolFound, row.data.schoolTotal, row.data.schoolName)}</span>
                                      {(row.data.otherPlaceTotal) && <span className="text-[10px] text-slate-500 border-t border-slate-100 pt-1 w-full">{getCiStr(row.data.otherPlaceFound, row.data.otherPlaceTotal, row.data.otherPlaceName)}</span>}
                                    </div>
                                 </td>
                               </tr>
                             ))}
                           </tbody>
                         </table>
                       </div>
                       
                       <div className="mt-4 bg-slate-50 p-4 rounded-xl border border-slate-100">
                           <p className="text-xs font-bold text-slate-600 uppercase mb-2">บ้านเลขที่ที่พบลูกน้ำ</p>
                           <p className="text-sm font-medium text-slate-800 leading-relaxed">
                               {[d0_2, d1, d3, d7, d14, d21].map(d => d.housesFound100m).filter(Boolean).join(', ') || '- ไม่พบข้อมูล/ไม่ได้ระบุ -'}
                           </p>
                       </div>
                   </div>

                   {/* 5. การประเมิน 28 วัน */}
                   <div className="bg-white border border-slate-200 rounded-2xl p-5 md:p-6 shadow-sm">
                       <h4 className="font-bold text-slate-800 text-base md:text-lg mb-4 flex items-center border-b border-slate-100 pb-3"><ShieldCheck className="w-5 h-5 mr-2.5 text-indigo-500 shrink-0"/> 5. การเฝ้าระวังผู้ป่วยใหม่และประเมินผล 28 วัน</h4>
                       <div className="space-y-4">
                          <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                             <div className="bg-slate-50 p-4 rounded-xl border border-slate-100">
                                <p className="text-xs font-semibold text-slate-500 mb-1">สถานะผู้ป่วย Gen 2 (Day 14-21)</p>
                                <p className="text-sm font-bold text-slate-800">
                                  {d14.checkGen2 || d21.checkGen2 ? <span className="text-emerald-600 flex items-center"><CheckCircle className="w-4 h-4 mr-1.5"/> สำรวจแล้วไม่พบผู้ป่วยรายใหม่</span> : <span className="text-slate-500">รอผลการเฝ้าระวัง</span>}
                                </p>
                             </div>
                             <div className="bg-slate-50 p-4 rounded-xl border border-slate-100">
                                <p className="text-xs font-semibold text-slate-500 mb-1">สถานะยุติการระบาด (Day 28)</p>
                                <p className="text-sm font-bold text-slate-800">
                                  {d28.isCaseClosed ? <span className="text-blue-600 flex items-center"><CheckCircle className="w-4 h-4 mr-1.5"/> ไม่พบเคสใหม่เกิน 28 วัน (ปิดเคส)</span> : <span className="text-slate-500">รอผลประเมิน Day 28</span>}
                                </p>
                             </div>
                          </div>
                          
                          <div className="bg-slate-50 p-4 rounded-xl border border-slate-100">
                             <p className="text-xs font-bold text-slate-600 uppercase mb-2"><FileText className="inline w-3.5 h-3.5 mr-1 mb-0.5"/> บันทึกถอดบทเรียน (AAR)</p>
                             <p className="text-sm font-medium text-slate-800 leading-relaxed whitespace-pre-wrap">
                               {d28.aarNote || '- ยังไม่มีการบันทึกข้อความถอดบทเรียน -'}
                             </p>
                          </div>
                       </div>
                   </div>
                </div>
             </div>
           );
        })()}

      </div>
    );
  };

  const renderAnalytics = () => {
    const getStatus = (valStr, den, type) => {
        if (den === 0) return 'nodata';
        const val = parseFloat(valStr);
        if (type === 'max100') return val >= 100 ? 'pass' : 'fail';
        if (type === 'min90') return val >= 90 ? 'pass' : 'fail';
        if (type === 'less20') return val <= 20 ? 'pass' : 'fail';
        if (type === 'less5') return val < 5 ? 'pass' : 'fail';
        return 'nodata';
    };

    // 🌟 นำ Response Time ออกและเหลือเพียง 4 KPI ตามที่ผู้ใช้กำหนด
    const kpiDefinitions = [
        {
            id: 1,
            title: "1. ติดตามผู้ป่วยครบ 28 วัน (1,3,7,28)",
            value: kpiStats.kpi2.val,
            num: kpiStats.kpi2.num,
            den: kpiStats.kpi2.den,
            unit: "ราย",
            target: "เป้าหมาย 100% (ลงข้อมูลครบถ้วน)",
            color: "emerald",
            type: "max100",
            methodology: "คำนวณจาก: ผู้ป่วยที่เลย 28 วันไปแล้ว ต้องมีการประเมินและบันทึกข้อมูลในระยะ Day 1, Day 3, Day 7 และ Day 28 ครบทั้ง 4 ระยะ"
        },
        {
            id: 2,
            title: "2. ไม่พบผู้ป่วยรายใหม่ใน 28 วัน",
            value: kpiStats.kpi3.val,
            num: kpiStats.kpi3.num,
            den: kpiStats.kpi3.den,
            unit: "ราย",
            target: "เป้าหมาย ≥ 90% (ยุติการระบาด)",
            color: "rose",
            type: "min90",
            methodology: "คำนวณจาก: ผู้ป่วยตั้งต้นที่ไม่ทำให้เกิดผู้ป่วยรายใหม่ (ในหมู่บ้านเดียวกัน) ภายในช่วง 1 - 28 วันถัดมา"
        },
        {
            id: 3,
            title: "3. อัตราเกิดผู้ป่วย Day 15-28 (Gen 2)",
            value: kpiStats.kpi4.val,
            num: kpiStats.kpi4.num,
            den: kpiStats.kpi4.den,
            unit: "ราย",
            target: "เป้าหมาย ≤ 20% (ควบคุมได้ > 80%)",
            color: "amber",
            type: "less20",
            methodology: "คำนวณจาก: จำนวนผู้ป่วยใหม่ที่พบในช่วงวันที่ 15 - 28 (นับเป็น Generation 2 ที่เกิดจากการควบคุมแหล่งเพาะพันธุ์ล้มเหลว)"
        },
        {
            id: 4,
            title: "4. อัตราพบลูกน้ำซ้ำซาก (Day 0,1,3,7)",
            value: kpiStats.kpi5.val,
            num: kpiStats.kpi5.num,
            den: kpiStats.kpi5.den,
            unit: "พื้นที่",
            target: "เป้าหมาย < 5% (บ้านเลขที่เดิม)",
            color: "purple",
            type: "less5",
            methodology: "คำนวณจาก: การพบลูกน้ำใน 'บ้านเลขที่เดิม' ซ้ำซากจากการลงสำรวจใน 4 ระยะแรก (Day 0, Day 1, Day 3 และ Day 7)"
        }
    ];

    const colorClasses = {
        blue: 'border-l-blue-500 text-blue-700 bg-blue-500',
        emerald: 'border-l-emerald-500 text-emerald-700 bg-emerald-500',
        rose: 'border-l-rose-500 text-rose-700 bg-rose-500',
        amber: 'border-l-amber-500 text-amber-700 bg-amber-500',
        purple: 'border-l-purple-500 text-purple-700 bg-purple-500'
    };

    return (
        <div className="animate-in fade-in duration-300">
            <div className="bg-white p-4 md:p-6 rounded-2xl shadow-sm border border-slate-200 mb-6 md:mb-8 flex flex-col md:flex-row justify-between items-start md:items-center gap-4 md:gap-5">
                <div>
                    <h2 className="text-lg md:text-2xl font-bold text-slate-800 flex items-center tracking-tight"><BarChart2 className="w-5 h-5 md:w-7 md:h-7 mr-2 md:mr-3 text-indigo-600 shrink-0" /> แดชบอร์ดประเมินผลตัวชี้วัด (KPI)</h2>
                    <p className="text-xs md:text-sm font-medium text-slate-500 mt-1 md:mt-1.5">ประมวลผลตัวชี้วัดความสำเร็จอัตโนมัติ จากฐานข้อมูลการลงพื้นที่จริง</p>
                </div>
                <div className="w-full md:w-auto bg-slate-50 px-4 md:px-5 py-2 md:py-2.5 rounded-xl border border-slate-200 flex items-center justify-between md:justify-start shadow-sm">
                    <div className="flex items-center">
                       <Filter className="w-3.5 h-3.5 md:w-4 md:h-4 mr-2 md:mr-2.5 text-slate-400 shrink-0"/>
                       <span className="text-xs md:text-sm font-bold text-slate-700">ข้อมูลปี พ.ศ. {selectedYear === 'all' || selectedYear === 'latest' ? availableYears[0] : selectedYear}</span>
                    </div>
                </div>
            </div>

            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-2 gap-4 md:gap-6 mb-6 md:mb-8">
                {kpiDefinitions.map(kpi => {
                    const isExpanded = expandedKpi === kpi.id;
                    const cClass = colorClasses[kpi.color];
                    const borderClass = cClass.split(' ')[0];
                    const textClass = cClass.split(' ')[1];
                    const bgClass = cClass.split(' ')[2];

                    return (
                        <div key={kpi.id} className={`bg-white p-5 md:p-7 rounded-2xl shadow-sm border border-slate-200 border-l-4 ${borderClass} relative overflow-hidden transition-all lg:hover:shadow-md`}>
                            <div className="absolute top-4 right-4 z-10">
                                {kpi.status === 'pass' && <span className="flex items-center text-[10px] md:text-xs font-bold text-emerald-700 bg-emerald-50 border border-emerald-200 px-2 md:px-2.5 py-1 rounded-md shadow-sm whitespace-nowrap"><CheckCircle className="w-3 h-3 md:w-3.5 md:h-3.5 mr-1 md:mr-1.5 shrink-0"/> ผ่านเกณฑ์</span>}
                                {kpi.status === 'fail' && <span className="flex items-center text-[10px] md:text-xs font-bold text-rose-700 bg-rose-50 border border-rose-200 px-2 md:px-2.5 py-1 rounded-md shadow-sm whitespace-nowrap"><AlertTriangle className="w-3 h-3 md:w-3.5 md:h-3.5 mr-1 md:mr-1.5 shrink-0"/> ไม่ผ่านเกณฑ์</span>}
                                {kpi.status === 'nodata' && <span className="flex items-center text-[10px] md:text-xs font-bold text-slate-500 bg-slate-50 border border-slate-200 px-2 md:px-2.5 py-1 rounded-md shadow-sm whitespace-nowrap">ไม่มีข้อมูล</span>}
                            </div>
                            
                            <div className="flex items-center gap-2 mb-2 md:mb-3 pr-24">
                                <h3 className="text-sm md:text-base font-bold text-slate-800">{kpi.title}</h3>
                                <button 
                                    onClick={() => setExpandedKpi(isExpanded ? null : kpi.id)}
                                    className={`p-1.5 rounded-full transition-colors shadow-sm border shrink-0 ${isExpanded ? 'bg-indigo-50 text-indigo-600 border-indigo-100' : 'bg-slate-50 hover:bg-slate-100 text-slate-400 hover:text-indigo-600 border-slate-200'}`}
                                    title="อ่านวิธีการวัดผล"
                                >
                                    {isExpanded ? <ChevronUp className="w-3.5 h-3.5 md:w-4 md:h-4"/> : <Info className="w-3.5 h-3.5 md:w-4 md:h-4"/>}
                                </button>
                            </div>
                            
                            <div className="flex items-center justify-between mb-4 md:mb-5 mt-1 md:mt-2">
                                <div className="flex items-end gap-1 md:gap-1.5">
                                    <span className={`text-3xl md:text-4xl font-black tracking-tighter ${textClass}`}>{kpi.value}</span>
                                    <span className={`text-base md:text-lg font-bold ${textClass} mb-1`}>%</span>
                                </div>
                            </div>

                            <div className="mb-4 md:mb-5 bg-slate-50 p-3 md:p-4 rounded-xl border border-slate-100 flex items-center justify-between">
                                <div className="text-center flex-1">
                                    <div className="text-[10px] md:text-xs text-slate-500 font-bold mb-0.5 md:mb-1 uppercase tracking-wider">ผลงาน</div>
                                    <div className={`text-lg md:text-xl font-black ${textClass}`}>{kpi.num} <span className={`text-[10px] md:text-xs font-medium ${textClass} opacity-80`}>{kpi.unit}</span></div>
                                </div>
                                <div className="w-px h-8 md:h-10 bg-slate-200 mx-2 md:mx-3"></div>
                                <div className="text-center flex-1">
                                    <div className="text-[10px] md:text-xs text-slate-500 font-bold mb-0.5 md:mb-1 uppercase tracking-wider">เป้าหมาย</div>
                                    <div className={`text-lg md:text-xl font-black ${textClass}`}>{kpi.den} <span className={`text-[10px] md:text-xs font-medium ${textClass} opacity-80`}>{kpi.unit}</span></div>
                                </div>
                            </div>

                            <div className="w-full bg-slate-100 rounded-full h-2 md:h-2.5 mb-2 md:mb-3 overflow-hidden">
                                <div className={`${bgClass} h-full rounded-full transition-all duration-1000 ease-out`} style={{width: `${Math.min(100, Math.max(0, kpi.value))}%`}}></div>
                            </div>
                            
                            <p className="text-xs md:text-sm font-semibold text-slate-500 mt-1">
                                {kpi.target}
                            </p>

                            {isExpanded && (
                                <div className="mt-4 md:mt-5 pt-4 md:pt-5 border-t border-slate-200 animate-in fade-in slide-in-from-top-2">
                                    <p className="text-[10px] md:text-xs font-bold text-slate-800 mb-2 md:mb-2.5 flex items-center">
                                        <Info className="w-3.5 h-3.5 md:w-4 md:h-4 mr-1.5 text-indigo-500 shrink-0"/> วิธีการคำนวณและประเมินผล
                                    </p>
                                    <div className="text-[10px] md:text-xs font-medium text-slate-600 leading-relaxed whitespace-pre-wrap bg-slate-50 p-3 md:p-4 rounded-xl border border-slate-200">
                                        {kpi.methodology}
                                    </div>
                                </div>
                            )}
                        </div>
                    );
                })}
            </div>
        </div>
    );
  };

  return (
    <div className="flex h-screen bg-slate-100 font-sans overflow-hidden">
      {/* Mobile Menu Overlay */}
      {isMobileMenuOpen && (
        <div 
          className="fixed inset-0 bg-slate-900/40 z-40 lg:hidden backdrop-blur-sm transition-opacity" 
          onClick={() => setIsMobileMenuOpen(false)}
        ></div>
      )}

      {/* Sidebar */}
      <aside className={`fixed lg:static top-0 left-0 h-full w-72 bg-white border-r border-slate-200 flex flex-col z-50 shadow-2xl lg:shadow-sm transition-transform duration-300 ease-in-out ${isMobileMenuOpen ? 'translate-x-0' : '-translate-x-full lg:translate-x-0'}`}>
        <div className="h-16 md:h-20 bg-emerald-700 text-white flex items-center justify-between px-6 font-bold text-xl md:text-2xl tracking-tight shadow-md z-10 shrink-0">
           <div className="flex items-center"><ShieldAlert className="w-6 h-6 md:w-7 md:h-7 mr-2.5 md:mr-3 text-emerald-300 shrink-0"/> DengueTrack</div>
           <button onClick={() => setIsMobileMenuOpen(false)} className="lg:hidden text-emerald-200 hover:text-white p-1 -mr-2">
              <X className="w-6 h-6" />
           </button>
        </div>
        <nav className="p-4 md:p-5 space-y-1 md:space-y-1.5 mt-1 md:mt-2 overflow-y-auto custom-scrollbar flex-1">
          <p className="px-3 md:px-4 text-[10px] md:text-xs font-bold text-slate-400 uppercase tracking-widest mb-2 md:mb-3 mt-1 md:mt-2">เมนูปฏิบัติการ</p>
          
          <button onClick={()=>handleMenuClick('patients')} className={`w-full flex items-center px-3 md:px-4 py-3 md:py-3.5 rounded-xl text-sm transition-all ${activeMenu === 'patients' ? 'bg-emerald-50 text-emerald-800 font-bold ring-1 ring-emerald-200 shadow-sm' : 'text-slate-600 font-semibold hover:bg-slate-50 hover:text-slate-900'}`}>
              <ListFilter className={`w-4 h-4 md:w-5 md:h-5 mr-3 md:mr-3.5 shrink-0 ${activeMenu === 'patients' ? 'text-emerald-600' : 'text-slate-400'}`}/> ทะเบียนผู้ป่วยและแจ้งเตือน
          </button>
          
          <button onClick={()=>handleMenuClick('map')} className={`w-full flex items-center px-3 md:px-4 py-3 md:py-3.5 rounded-xl text-sm transition-all ${activeMenu === 'map' ? 'bg-emerald-50 text-emerald-800 font-bold ring-1 ring-emerald-200 shadow-sm' : 'text-slate-600 font-semibold hover:bg-slate-50 hover:text-slate-900'}`}>
              <MapPin className={`w-4 h-4 md:w-5 md:h-5 mr-3 md:mr-3.5 shrink-0 ${activeMenu === 'map' ? 'text-emerald-600' : 'text-slate-400'}`}/> แผนที่วิเคราะห์พิกัดรังโรค
          </button>
          
          <button disabled={!selectedPatient} onClick={()=>handleMenuClick('tracking')} className={`w-full flex items-center px-3 md:px-4 py-3 md:py-3.5 rounded-xl text-sm transition-all ${activeMenu === 'tracking' ? 'bg-emerald-50 text-emerald-800 font-bold ring-1 ring-emerald-200 shadow-sm' : 'text-slate-400 font-semibold opacity-60'}`}>
              <Activity className={`w-4 h-4 md:w-5 md:h-5 mr-3 md:mr-3.5 shrink-0 ${activeMenu === 'tracking' ? 'text-emerald-600' : 'text-slate-300'}`}/> 
              <div className="text-left leading-snug">
                  ติดตามระบาดวิทยา<br/>
                  <span className={`text-[9px] md:text-[10px] font-medium ${activeMenu === 'tracking' ? 'text-emerald-600' : 'text-slate-400'}`}>(มาตรการ 3-3-1-7-14-21-28)</span>
              </div>
          </button>
          
          <div className="my-4 md:my-6 border-t border-slate-100"></div>
          
          <p className="px-3 md:px-4 text-[10px] md:text-xs font-bold text-slate-400 uppercase tracking-widest mb-2 md:mb-3">สรุปผลสำหรับผู้บริหาร</p>
          
          <button onClick={()=>handleMenuClick('analytics')} className={`w-full flex items-center px-3 md:px-4 py-3 md:py-3.5 rounded-xl text-sm transition-all ${activeMenu === 'analytics' ? 'bg-indigo-50 text-indigo-800 font-bold ring-1 ring-indigo-200 shadow-sm' : 'text-slate-600 font-semibold hover:bg-slate-50 hover:text-slate-900'}`}>
              <BarChart2 className={`w-4 h-4 md:w-5 md:h-5 mr-3 md:mr-3.5 shrink-0 ${activeMenu === 'analytics' ? 'text-indigo-600' : 'text-slate-400'}`}/> ประเมินตัวชี้วัด (KPI)
          </button>
        </nav>
        <div className="p-3 md:p-4 border-t border-slate-200 bg-slate-50 shrink-0">
            <div className="text-[10px] md:text-xs font-medium text-slate-500 text-center">Smart Dengue System v3.0</div>
        </div>
      </aside>

      <main className="flex-1 overflow-hidden flex flex-col relative w-full">
        <header className="h-16 md:h-20 bg-white border-b border-slate-200 flex items-center justify-between px-4 md:px-8 z-10 shadow-sm w-full shrink-0">
          <div className="flex items-center overflow-hidden mr-2">
             <button onClick={() => setIsMobileMenuOpen(true)} className="lg:hidden p-1.5 md:p-2 mr-2 -ml-1 text-slate-600 hover:bg-slate-100 rounded-lg shrink-0">
               <Menu className="w-6 h-6 md:w-6 md:h-6" />
             </button>
             <h1 className="text-sm sm:text-base md:text-xl font-bold text-slate-800 tracking-tight flex items-center truncate">
               <span className="hidden sm:inline">ระบบเฝ้าระวังและควบคุมโรคไข้เลือดออกอัจฉริยะ (อ.พนา)</span>
               <span className="sm:hidden truncate">Smart Dengue (อ.พนา)</span>
             </h1>
          </div>
          <div className="flex items-center gap-2 md:gap-3 shrink-0">
             <a 
                 href="https://smarteocdengue.pages.dev/" 
                 target="_blank" 
                 rel="noreferrer"
                 className="hidden md:flex items-center bg-white hover:bg-indigo-50 text-indigo-700 px-3 md:px-4 py-1.5 md:py-2 rounded-xl text-xs md:text-sm font-bold border border-indigo-200 transition-colors shadow-sm whitespace-nowrap"
                 title="เปิดศูนย์ปฏิบัติการภาวะฉุกเฉิน (Smart EOC Dengue)"
             >
                 <ExternalLink className="w-3.5 h-3.5 md:w-4 md:h-4 mr-1.5 md:mr-2 shrink-0" />
                 Smart EOC Dengue
             </a>
             <div className="bg-slate-100 px-2.5 md:px-4 py-1.5 md:py-2 rounded-lg md:rounded-xl text-[10px] md:text-xs font-bold border border-slate-200 text-slate-600 flex items-center shadow-sm whitespace-nowrap">
               <Calendar className="w-3 h-3 md:w-4 md:h-4 mr-1.5 md:mr-2 text-emerald-600 shrink-0"/> {formatThaiDate(new Date())}
             </div>
          </div>
        </header>
        <div className="flex-1 overflow-y-auto p-3 md:p-8 bg-slate-100/80 w-full relative">
          <div className="max-w-7xl mx-auto w-full">
              {activeMenu === 'patients' && renderPatientList()}
              {activeMenu === 'map' && renderMap()}
              {activeMenu === 'tracking' && renderTrackingView()}
              {activeMenu === 'analytics' && renderAnalytics()}
          </div>
        </div>
      </main>
    </div>
  );
};

export default App;